-1

For the desktop landing page, I want this composition of images to maintain it's height in relation to the browser height (75vh), otherwise this landing collage will become too horizontal/skinny as someone shrinks the width of their browser.

As it changes proportion with the page getting wider or narrower, I want the images inside to be cropped, not stretched.

I figured out a way to crop them, but only if I set an actual px height to the images. I don't want that. I want the height to be in proportion to the browser height. If I make the divs they're in a ratio of the height of the browser, then the images just stretch inside to fit the div.

<div class="landing">
    <div class="landing-side"><img src="landing-1.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-2.jpg" alt=""></div>
    <div class="landing-center"><img src="landing-3.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-4.jpg" alt=""></div>
    <div class="landing-side"><img src="landing-5.jpg" alt=""></div>
</div>


.landing {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    }
.landing img {
        width: 100%;
        height: auto;
        display: block;
        }    

.landing-center,
.landing-side {
        height: 75vh;
        display: flex;
        flex: 1 1 auto;
        overflow: hidden;
        justify-content: center;
        }

.landing-center {width: 40%;}
.landing-side {width: 15%;}

Here is how I did it before - at a certain browser width, the height would be fixed in px, then the side images would start getting cropped*. This is OK, but then I'd have to do make it hop to various specific image heights at different widths. Whereas I want the height of the whole larger container of images to change as the browser changes proportions.

    .landing {
    position: relative;
    width: 100%;
    display: flex;
    }
    .landing img {
            width: 100%;
            height: auto;
            display: block;
            }
    .landing-center,
    .landing-side  {
            display: flex;
            flex: 1 1 auto;
            overflow: hidden;
            justify-content: center;
            }

        @media screen and (max-width: 1536px) { 
            .landing-center {flex-shrink: 0;}
            .landing-center img,
            .landing-side img {
                width: auto;
                height: 400px;
            }
        }

*(Note: I'd prefer that only the side images get cropped in the first code example as well, but that may complicate things too much for this one question.)

IOio
  • 1
  • 2
  • Have you investigated object-fit cover? Please make your code into a runnable snippet. – A Haworth Jun 24 '22 at 05:17
  • I figured out the problem. I just had to literally change out the height of px to a height of vh. When I rewrote it, first code above, I didn't put it the height element as an attribute to the img, but to the container. So this fixes it: .landing-center {flex-shrink: 0;} .landing-center img, .landing-side img { width: auto; height: 75vh; } Thank you. – IOio Jun 24 '22 at 19:49

2 Answers2

0

To croping an image, you need to use overflow: hidden; just like:

.croped-content {
  position: relative;
  width: 25vw;
  height: 70vw;
  border: 2px solid red;
  overflow: hidden;
}

.croped-content img {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="croped-content">
 <img src="https://cdn.pixabay.com/photo/2017/10/06/07/29/guava-2822182_1280.png" alt="guava">
</div>
ANDO Andriamalala
  • 308
  • 1
  • 7
0

All I had to do is put the vh here, instead of the px. This works now. I got all mixed up trying too many ways to make this work that I missed the fact that I had put the height attribute to the container instead of the image.

.landing-center {flex-shrink: 0;}
            .landing-center img,
            .landing-side img {
                width: auto;
                **height: 75vh;**
            }
IOio
  • 1
  • 2