Basically, I want to have two columns with text and images, but the second one is inverted-CodePudding

This is my expected output

I'm trying to get the output without cropping the image, here is my code

.blog-col-group {
  display: flex;
}

.blog-col {}

.mod-vin-img {
  width: 500px;
  height: 700px;
}

.mod-vin-img>img {
  object-fit: contain;
}

<body>
  <div >
    <div >
      <div >
        <p >
          What is not to love about this look? It is practical, stylish and allows you to play with a variety of table decor accessories.
        </p>
        <div >
          <img src="https://dummyimage.com/4000x5000/25db71" alt="img-1">
        </div>
      </div>
      <div >
        <div >
          <img src="https://dummyimage.com/800x1200/bf34bf" alt="img-2">
        </div>
        <p >
          It’s all about adding story and intrigue, with a touch of the eclectic.
        </p>
      </div>
    </div>
  </div>
</body>

It seems the first image won't resize, but the rest already got into the position. Thanks in advance for any help.

CodePudding user response：

Move width to .blob-col to unify width between image and paragraph.

Set height and width of img's to 100%.

Change object-fit from contain to cover, to avoid whitespace.

.blog-col-group {
  display: flex;
}

.blog-col {
  width: 500px;
}

.mod-vin-img {
  height: 700px;
}

.mod-vin-img>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<body>
  <div >
    <div >
      <div >
        <p >
          What is not to love about this look? It is practical, stylish and allows you to play with a variety of table decor accessories.
        </p>
        <div >
          <img src="https://dummyimage.com/4000x5000/25db71" alt="img-1">
        </div>
      </div>
      <div >
        <div >
          <img src="https://dummyimage.com/800x1200/bf34bf" alt="img-2">
        </div>
        <p >
          It’s all about adding story and intrigue, with a touch of the eclectic.
        </p>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

The issue here that I identified are listed below

height and width of .mod-vin-img are statically hardcoded to 500px and 700px. This will take this dimension always and will not adjust while resizing. I made it as max-width: 500px;
You have not specified any with for the image .mod-vin-img > img. This will always take its full width in this case. I have restricted that to width: 100%;

Working Fiddle

.blog-col-group {
  display: flex;
}

.blog-col {
}

.mod-vin-img {
  max-width: 500px;
  /* height: 700px; */
}

.mod-vin-img > img {
  object-fit: contain;
  width: 100%;
}

<div >
  <div >
    <div >
      <p >
        What is not to love about this look? It is practical, stylish and
        allows you to play with a variety of table decor accessories.
      </p>
      <div >
        <img src="https://dummyimage.com/4000x5000/25db71" alt="img-1" />
      </div>
    </div>
    <div >
      <div >
        <img src="https://dummyimage.com/800x1200/bf34bf" alt="img-2" />
      </div>
      <p >
        It’s all about adding story and intrigue, with a touch of the
        eclectic.
      </p>
    </div>
  </div>
</div>

CodePudding user response：

.blog-col-group {display: flex}
.blog-col {flex: 1}

<div >
    <div >
        <p >What is not to love about this look? It is practical, stylish and allows you to play with a variety of table decor accessories.</p>
        <img src="https://dummyimage.com/4000x5000/25db71" alt="img-1" width="100%">
    </div>
    <div >
        <img src="https://dummyimage.com/800x1200/bf34bf" alt="img-2" width="100%">
        <p >It’s all about adding story and intrigue, with a touch of the eclectic.</p>
    </div>
</div>