What to do when images wont resize height?

just started this page where i placed three images side by side, one of which is taller than the other two. very simply want them all the same height. width set to 33.33%, works fine. any height changes inline, or in css, pushes my placeholder text (in another div below ) down rather than resizing the img. this has been a difficult thing to find answers to online other than the usual “set the height to X in the css” kind of reply. even messing with them via media queries they are unresponsive… the rest of the CSS to get them side by side is the only way i know how, or have seen. hopefully thats not the issue.
CSS 110-120.

ideas?

Hello,
All of the pictures are different aspect ratios, so the heights will always be different when they are in the same sized containers.
The images are very large in size, so if you can, how about resizing them all to the same height as the middle image in GIMP or PS, and them add them to the site?

as new as i am to this, ill be straight up: i have no idea what that is or how to use it LOL
does that mean then there is no CSS way of sizing them then? …did i waste 3 hours on google trying to find answers :frowning:

If your image is smaller than the screen size, it will use the image width. If it is bigger, it uses max-width. So assuming your image is smaller than the screen display, you want to change your “max-width” to “width” to increase the image size.

that doesnt fix it either, though width isnt the issue because within the container the 3 images occupy 33.33% ea. which is perfect, its just the heights are different.

And they always will be. Unless you crop the images or resize them as I already mentioned. It’s the aspect ratio.
It is better to have images that are the correctly formated than try to hack them with code.

Yes, but the widths will not be equal. Try this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Engines</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <figure>
      <img class="image" src="https://scontent.flas1-1.fna.fbcdn.net/v/t1.0-9/62322664_2692967300720702_8912304185718865920_o.jpg?_nc_cat=102&_nc_ohc=Izk4P9T1OOYAQmIYvE8C0gzjAXGFwXD1tnGfA7J3i1FUfw-t4Rvp9fG9Q&_nc_ht=scontent.flas1-1.fna&oh=1701b664108917eecbcb0b6ed9dd7136&oe=5E7CCE67" alt="Yellow eng">
    </figure>
    <figure>
      <img  class="image" src="https://scontent.flas1-2.fna.fbcdn.net/v/t1.0-9/72442375_2897558356928261_5605364283320827904_n.jpg?_nc_cat=101&_nc_ohc=Pwr_HihV0pUAQktTT9mDkL_DvvygEiIQD7pdWsk62DqalhQ8RA5unAl-A&_nc_ht=scontent.flas1-2.fna&oh=cb9000f22a82ae1d23d56dde99e98fea&oe=5E7A20E6" alt="Lorraine eng">
    </figure>
    <figure>
      <img  class="image" src="https://scontent.flas1-2.fna.fbcdn.net/v/t1.0-9/66156519_2741790825838349_4492437574303875072_n.jpg?_nc_cat=103&_nc_ohc=fA0iBUZ8YxAAQkDpOF7jrGb1Nk7tW1JyC2iAvRmmMJ1X5Tx2SSdghZaGQ&_nc_ht=scontent.flas1-2.fna&oh=821f1dad1e4d2a740efb6124f9f73408&oe=5E6D54B4" alt="Maxine eng">
    </figure>
  </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  justify-content: center;
  height: 20vh;
  margin: auto;
}
figure {
  height: 100%;
}
.image {
  height: 100%;
  width: auto;
  margin: 5px;
}

It’s not wasted (I tell myself when this happens to me)… I read a lot and learned from what I read, even if it isn’t what fixed my problem :wink:

Your pictures are different sized rectangles so they’re not going to line up nicely. Yoda and a basketball player …

It might seem overwhelming but it’s totally worth learning how to use tools like GIMP to work with images.

1 Like

ok ill see how that goes, thank you for that!

fair enough, you’re right!

1 Like

Any ideas on this kind of issue? I deployed my site after hours and hours of testing using chrome tools, and it all looked great until i pulled it up on my iphone. This is the first page on loadup, only iphones are doing this weird ultra zoom thing into some portion of the photo, androids are displaying as told.

Ive spent about 2 days and as many ways as i could find to just get the damn thing to display somewhat correctly and every method is the same result even with the simple snippit:

.img {
background-image: url();
background-position: center center;
background-repeat: no repeat;
background-attachment: fixed;
background-size: cover;
}

Sites using it all scale perfectly, my shit gets locked up at 400px, cuts the img off, and iphones super zoom in on it. Is that another aspect issue…?

Live site: voodooracinginnovations.com

Ty,

YOu might want to post this as a new issue w/ its own title (Iphone zoom problem) for fresh eyes on it…

1 Like

thought about that but im like dang i post so many topics here hahaha. you know what i just went through and completely simplified the img. setup from all the background stuff and the scroll to just the img in a div and moved the text up so the welcome is visible and its all working 100% with that method, and its simple. thank you for the help :slight_smile: until next time!

1 Like