如何将img伸展到容器的宽度，无论它的高度如何？

Question

..期待图片在顶部和底部被“裁剪”。我只希望它适合宽度100％，并希望变得比高度大，但不要离开某个容器。

这是怎么做到的？

Answer 1

只需将容器的css overflow属性设置为hidden，给它一个固定的大小，将图像放入固定宽度内，然后完成：）

好吧，差不多完成了。要在顶部和底部裁剪，您需要将图像垂直居中放在框中。实现这一目标的一个方法就是在图像的两侧都有微小的文本节点，其line-height与容器div高度相同。给图像vertical-align:middle应该在你的div中垂直居中。

Answer 2

如果你的意思是想要一个img伸展到一个容器的整个宽度但你的高度也会被切断然后你想要这样的东西。你的问题有点茫然。

.container{
    width:300px;
    height:300px;
    overflow:hidden;
    display:block;}

.container img{
    width:100%;
    vertical-align:middle;
   }