CODEWITHSUNDEEP
htmlcssimage
samfortunato
samfortunato

Reputation: 43

Image not resizing itself properly in relation to parent div

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.

Upvotes: 2

Views: 3806

Answers (3)

Philip G
Philip G

Reputation: 4104

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

Upvotes: 0

heyitsjhu
heyitsjhu

Reputation: 971

Try: 

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

Upvotes: 0

user5626618
user5626618

Reputation:

Using width: 100% is the easiest way.

Upvotes: 1

Related Questions