如何在一个宽度为%的div中保持图像的宽高比？

Question

抱歉再次询问，但我的搜索没有发现我能够实现的任何内容。我有一个带有以下样式的div内的图像：

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

我希望图片的高度锁定在100像素，宽度保持在50％。理想情况下，图片将保持其宽高比，并根据需要裁剪以适合缩略图大小。除非有更简单的使用js的方式，否则最好不要涉及js。抱歉我的编码经验不足。

任何帮助都将不胜感激。

- user3379832

---

这张图片应该如何保持高度为100像素，宽度为50％并且保持其纵横比？ - George

@oGeez在问题中已经说明了。图片应该进行裁剪。 - CeejeeB

啊，没注意到。谢谢 @CeejeeB - George

把以下与编程有关的内容从英语翻译成中文。只返回翻译后的文本：像这样：http://imgur.com/N5xfhRs - user3379832

Answer 1

这应该是您正在寻找的内容： FIDDLE CSS:

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

- web-tiki

---

啊！太棒了！非常感谢。我从来没有想过在grid_6类中定义宽度。感谢您的回答。您是否也知道如何将图像居中放置在div内？ - user3379832

@user3379832 很高兴我能帮到你。如果你需要垂直对齐图像，使用CSS会非常困难，我不知道解决方案，你可以提出一个新的问题询问。 - web-tiki

Answer 2

这是你想要的吗？

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

- Chris Broski

---

在这种情况下，图像会缩小到保持高度为100px的纵横比的任何宽度。我希望图像覆盖容器的全部宽度，该容器占正文的50%。 - user3379832