CODEWITHSUNDEEP
htmlcssflexbox
Neo Conker
Neo Conker

Reputation: 169

How to create cropped scalable image containers in a flexbox?

I'm trying to have a 3 column flex-box layout on my website that has 3 images on top, and then 3 bodies of text. I want the images to be a fixed aspect ratio container that crops an image if it's too big for the container, the image needs to fill the entire container height-wise.

If the window is sized down, the images should scale down maintaining aspect ratio with the flexbox, instead right now it just scales the width in.

My problem is no matter what solutions i researched, i could not find one that gives cropped images with a fixed aspect ratio, that also scales maintaining that ratio. It always either has the entire image that will scale, or just scale in the width, further cropping the image.

Is there any solution out there I can use?

html {
  height: 100%;
}

body {
  text-wrap: normal;
  text-align: center;
  position: relative;
  padding-bottom: 5.5em;
  margin: 0;
  min-height: 100%;
}

.homeinfo-flex {
  margin: 0px;
  padding: 0px;
  float: left;
  width: 100%;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  display: flex;
  max-width: 67em;
  justify-content: space-around;
  background: #CCC;
}

.homeinfo-flex .col {
  width: 30%;
  margin: 0 1%;
  text-align: left;
}

.homeinfo-flex .container {
  text-align: center;
  overflow: hidden;
  padding-bottom: 2em;
}

.homeinfo-flex img {
  position: relative;
  left: 100%;
  margin-left: -200%;
  height: 15.62em;
  max-width: 15.62em;
}
<body>
  <div class="homeinfo-flex">
    <div class="col">
      <div class="container"><img src="images/street_ph.jpg" alt="Street" /></div>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="col">
      <div class="container"><img src="images/resturaunt_ph.jpg" alt="Street" /></div>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="col">
      <div class="container"><img src="images/event_ph.jpg" alt="Street" /></div>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</body>

Upvotes: 0

Views: 73

Answers (1)

Nathan Shanahan
Nathan Shanahan

Reputation: 103

Option 1: Attach the image as a background image. div class="container" style="background-image: url(images/resturaunt_ph.jpg);" 

.container {
    background-image: url()
    background-size:cover;
    padding-bottom: 80%; // 5:4 ratio
}

Option 2: Pad the container with your aspect ratio and set image to object-fit:cover. 

.container {
    position:relative;
    padding-bottom: 80%; // 5:4 ratio
}
.container img {
    position:absolute;
    top:0;
    left:0;
    min-height: 100%;
    min-width:100%;
    object-fit: cover // check browser support
}

Upvotes: 1

Related Questions