如何保持图像宽高比在宽度div内？ [英] How to keep image aspect ratio inside a %width div?

问题描述

我很抱歉再次提出这个问题，但我的搜索没有透露任何我能够实施的内容。我有一个div内的图像，其样式如下：

 < div class =thumb grid_6> 
< img src =img / test2.jpgalt =flavin/> 
< / div> 
 
 .grid_6 {width：50％; } 
 
 .thumb img {
 display：block; 
最大宽度：100％; 
最大高度：100px; 
宽度：100％; 
  

我希望图片高度锁定在100px，宽度保持在50％。理想情况下，图像将保持其纵横比，并且裁剪到所需大小以适应缩略图。我宁愿不进入js，除非有更简单的方法来使用js。我很抱歉我缺乏编码经验。

任何帮助都将不胜感激。

解决方案

这应该是你正在寻找的东西：

strong> FIDDLE

CSS：

  .grid_6 {
 width：50％; 
 height：100px; 
 overflow：hidden; 
} 
 .thumb img {
 display：block; 
宽度：100％; 
 height：auto; 
} 
  

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.

解决方案

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

这篇关于如何保持图像宽高比在宽度div内？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！