CODEWITHSUNDEEP
htmlcssimageaspect-ratio
Daniel Williams
Daniel Williams

Reputation: 665

Responsive Image Problems

These are the constraints: The image must always maintain its original aspect ratio. If the parent container's width is too small, then resize the image to fit within it. The maximum height of the image is 400 pixels. The maximum width of the image is the width of the parent container. The problem: The images does not maintain its aspect ratio when restricted by the parent's width. Here is the CSS I have:

img.myImage {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:400px;
}

EDIT: To add to the difficulty, this is the parent component:

div.programContainer {
    width: 100%;
    max-width: 1300px;
    padding: 10px;
    text-align: left;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

EDIT: Solution: Sorry, this had nothing to do with the image itself, removing the unnecessary flex-box in the parent container solved the problem.

Upvotes: 0

Views: 295

Answers (2)

Rafiqul Islam
Rafiqul Islam

Reputation: 961

You can use css like this:

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
}
<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" alt="Rafique">

Upvotes: 1

Connor Gurney
Connor Gurney

Reputation: 372

As @EdangJeorlie says, you'd need width: 100% to resize the image when the browser is resized. An example is here on JSBin.

Just as a heads-up, I believe you could get rid of height: auto as that would be the default. Hope this helps!

Upvotes: 0

Related Questions