CODEWITHSUNDEEP
htmlcssaspect-ratio
user3379832
user3379832

Reputation: 33

How to keep image aspect ratio inside a %width div?

I'm sorry to ask this again, but my search has not revealed anything that I have been able to implement. I have an image inside a div with the following styles:

<div class="thumb grid_6">
    <img src="img/test2.jpg" alt="flavin" />
</div>

.grid_6 { width: 50%; }

.thumb img {
display: block;
max-width:100%;
max-height: 100px;
width:100%;

I'd like the image height to be locked at 100px, with the width remaining at 50%. Ideally the image would keep its aspect ratio, and just crop to the required size to fit the thumbnail. I'd rather not get into js, unless there is a much easier way to do it using js. I apologize for my lack of experience in coding.

Any help would be much appreciated.

Upvotes: 3

Views: 4495

Answers (2)

web-tiki
web-tiki

Reputation: 103750

This should be what you are looking for:

FIDDLE

CSS:

.grid_6 {
    width: 50%;
    height:100px;
    overflow:hidden;
}
.thumb img {
    display: block;
    width:100%;
    height:auto;
}

Upvotes: 1

Chris Broski
Chris Broski

Reputation: 2550

Is this what you want?

.grid_6 {overflow: hidden; }
.thumb img {
    height: 100px;
    width: auto;
}

Upvotes: 0

Related Questions