CODEWITHSUNDEEP
htmlcss
Paul Cudles
Paul Cudles

Reputation: 45

How to resize images with different sizes within a set of containers | CSS

I am trying to build an image-focussed page, where all images resize flexibly within fixed-sized containers. The containers are set up in two rows; the first are three 4-spaced columns each with an image (following bootstrap), and the second row is a 12-spaced column, filled with one image.

Ideally, I want them to show this behavior: - If they are wider than the container, I want the image to be resized and centered, until the image border meets the container either heightwise or widthwise. Any corresponding spillover will be cut-off.

Overflow already cuts them off; align-self should center them; object-fit covers the image; but I don't know how to make it behave the way as I described above.

Thanks very much for having read this far, and thank you even more if you are willing to help me out ^^

The website

Code:

.img-responsive {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
  align-self: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.col-4 {
  min-height: 20px;
  max-height: 300px;
  padding: 0;
  overflow: hidden;
}

.col-12 {
  min-height: 150px;
  max-height: 300px;
  padding: 0;
  overflow: hidden;
}
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-4 hoveropacity">
        <img class="img-responsive" src="https://vietnamtravel.guide/wp-content/uploads/2015/04/Banh-Mi-Vietnam.jpg" );>
      </div>
      <div class="col-4 hoveropacity">
        <img class="img-responsive" src="https://s.iha.com/00125194526/Hanoi-municipality-Street-market-in-hanoi.jpeg" );>
      </div>
      <div class="col-4 hoveropacity">
        <img class="img-responsive" src="https://i.pinimg.com/736x/da/86/35/da863581a7524e3260b6ba75a8b08cdb--vietnamese-iced-coffee-coffee-latte.jpg" );>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 hoveropacity">
        <img class="img-responsive" src="https://www.vietnamtravelblog.info/wp-content/uploads/2011/05/Vietnam.jpg" );>
      </div>
    </div>
  </div>
</section>

NB: I did look around for answers already given, but I couldn't quite find an answer that worked for me. Please forgive any oversight on my part.

Upvotes: 2

Views: 82

Answers (1)

Paul Cudles
Paul Cudles

Reputation: 45

Solved! Thanks to @Kangouroops

Added

object-fit: contain;
width: 100%;
height: 100%;

Upvotes: 1

Related Questions