2

Trying to make it so images will resize themselves to fit in a square container.

I want to make it so no matter the size of an image, it will resize itself to fit the container, but keep its aspect ratio.

Here is my HTML code so far:

<div id="product-details">

    <div id="product-image-display">
        <div>
            <div>
                <span><img src="img/product-images/IBANEZ-AW300ECE-DARK-VIOLIN-SUNBURST-02.JPG"></span>
            </div>
        </div>
    </div>

</div>

And CSS:

div#product-details div#product-image-display {
    position: relative;
    width: 100%;
    overflow: hidden;
}

div#product-image-display:before {
    content: "";
    display: block;
    padding-top: 100%;
}

div#product-details div#product-image-display div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div#product-details div#product-image-display div div {
    display: table;
    width: 100%;
    height: 100%;
}

div#product-image-display div div span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

div#product-details div#product-image-display div div span img {
    height: 100%;
}

Here's what it's doing now:

image

I want the image to resize and keep its aspect ratio, no matter what size it is. I can't just do width: 100%, as images that are tall and thin will not resize height properly. And I can't do the opposite, because of a similar but opposite problem. I can't do if statements with CSS, can I? (if img width > img height, then img width: 100%, etc.) That's a logical way I could do this.

Is there any way to do this without javascript/purely CSS/HTML?

EDIT: Big question rephrase.

samfortunato
  • 43
  • 2
  • 8

3 Answers3

1

Using width: 100% is the easiest way.

  • 1
    Whenever I use `width: 100%` it makes the image width properly resize to the container, but then the bottom half of the image gets cut off, as the image is tall. – samfortunato Dec 29 '15 at 18:24
  • Take out all height css –  Dec 29 '15 at 18:25
  • Try to add this attribute to the image: `style="width: 100%"` –  Dec 29 '15 at 18:33
  • That would be the same thing as if I added `width: 100%` to `div#product-details div#product-image-display div div span img { height: 100%; }`. Still isn't working. – samfortunato Dec 29 '15 at 18:56
  • Try height: 100% instead –  Dec 29 '15 at 19:02
  • And put the image in a

    and give it a centre align attribute

     –  Dec 29 '15 at 19:03
  • Whenever I put in `height: 100%`, it seems to display the image in 100% of the _image's_ height, instead of 100% of the _parent container's_ height, which is what I want it to do. So it just displays the image in its full height at around 3000px, instead of just filling up the height of the square container it's in. Very annoying... – samfortunato Dec 29 '15 at 19:14
0

Try: 

div#product-details div#product-image-display div div span img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
heyitsjhu
  • 951
  • 7
  • 9
  • Tried it. Still getting the same problem. Edited my original post with an image to show the problem that's going on. – samfortunato Dec 29 '15 at 18:25
  • Thanks. Quick question: what is the purpose of your `:before` code? I noticed that the `padding` affects the viewable area of the image. It might be a part of the reason, but I don't want to mess with it if it's absolutely necessary to have that code. – heyitsjhu Dec 29 '15 at 18:59
  • I copied it from somewhere (haha) to make a square box that will center anything you put into it. see: http://jsfiddle.net/josedvq/38Tnx/ . I assume it's to make the "height" of the box where you put the content in? – samfortunato Dec 29 '15 at 19:05
  • Hm, does this get close? https://jsfiddle.net/suomyone/42pc1shq/9/. It's responsive based on the viewport. I placed a portrait and landscape image to show that they both resize to the "box". However, I'm still trying to figure out a way to vertically center the portrait image. You'll notice I commented out a lot of the existing code, but let me know if any must be included. – heyitsjhu Dec 29 '15 at 19:56
  • Yeah, that can work, but the last image you had (where image had more width than height) has to be centered in the middle of the square vertically, as well as horizontally. I actually came to a similar solution to what you posted as well, but the image was still not centered vertically and horizontally. I also wanted to avoid using vw units as there are still compatibility issues across browsers. – samfortunato Dec 29 '15 at 20:06
  • Yeah, I still haven't figured out how to vertically align the landscape (2nd) image yet. Agreed on the limitations of the vw units. I'll let you know if I discover anything new. – heyitsjhu Dec 29 '15 at 20:31
  • I think I'm probably going to have to do some javascript or something for this one. I'm pretty sure I'd have to find a way to script it so that it'll resize the image properly based on whether it's wide or tall, and resize it according to the parent container, etc. Thanks for all the help, everyone - really appreciate it. – samfortunato Dec 29 '15 at 20:46
  • I was able to remove the vw units but still can't figure out how to vertically center the landscape image. Sorry bud. https://jsfiddle.net/iamjhu/42pc1shq/10/ – heyitsjhu Dec 29 '15 at 20:59
  • It's alright, man. I appreciate all the work anyway :P much more than most would do. :) – samfortunato Dec 29 '15 at 21:12
  • It's all good. It's a learning opportunity for both of us. I tried it again from scratch, though it's a bit manual. http://jsfiddle.net/iamjhu/46psK/3542/. You'll need to fine tune the height within the `:before` tag to position the landscape image into the middle, depending on your container's height. Once set, it seems to scale properly. – heyitsjhu Dec 29 '15 at 22:01
0

How about putting your image as background instead of a <img src=...tag?

You could then use background-size: contain;in your css, like this:

HTML

<div id="product-details">

    <div id="product-image-display">
        <div>
            <div>
                <span style='background-image: url(http://placehold.it/20x75)'></span>
            </div>
        </div>
    </div>

</div>

CSS

div#product-details div#product-image-display {
    position: relative;
    width: 100%;
    overflow: hidden;
}

div#product-image-display:before {
    content: "";
    display: block;
    padding-top: 100%;
}

div#product-details div#product-image-display div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div#product-details div#product-image-display div div {
    display: table;
    width: 100%;
    height: 100%;
}

div#product-image-display div div span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

div#product-details div#product-image-display div div span img {
    height: auto;
    width: auto;

}

Fiddle

Philip G
  • 4,098
  • 2
  • 22
  • 41