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.

回答1:

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;
}

回答2:

Is this what you want?

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

来源：https://stackoverflow.com/questions/22177264/how-to-keep-image-aspect-ratio-inside-a-width-div