Question

我在网站上工作，现在我想要一个图像（img标签）只能水平缩放。所以它总是要占据全高。当你调整屏幕时，它应该保持在中心并裁剪左右两侧。没有＆＃34;伸展＆＃34;图像。

举个例子（它是滑块中的大左图像）：

http://reddle.nl/frankendael/beers/t-i-t-s/

我希望能够随时查看整个啤酒瓶。

Answer 1

img {
    height: auto;
    max-width: 100%;
}

Answer 2

试试这个。

.vc_inner {
    height: 100%;
}
.attachment-full {
    height: 100%;
    width: 100%;
}

如果您想要适合所有屏幕，请使用min-height或max-height

Answer 3

您必须将图片嵌入到width:100%和oveflow:hidden的div中。您的图片必须包含其尺寸，div必须至少与图片

具有相同的高度

Answer 4

有几种方法可以实现这一目标。由于您没有提供所有可能的详细信息或任何代码，我只是猜测这可能会达到您想要的效果：

＆＃13;

body {
  margin: 0; padding: 0;
}

.container {
  width: 40%;
  height: 100vh;
  
  overflow: hidden;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* just to show the container for testing */
  box-shadow: 2px 2px black;
}

img {
  height: 100%;
}

＆＃13;

<div class='container'>
  <img src='https://source.unsplash.com/random/800x1000/daily'>
</div>

＆＃13;

我选择使用flex-box，给容器全高，显示其内容（图像）中心/中心，并为图像提供100％的高度。当盒子太小时会从侧面突出，当盒子太大时会增加空白。

您可以看到实时版at this CodePen。还有其他方法可以做到这一点，但这个方法相当干净且得到很好的支持。

祝你好运！如果这不是你想要的，请更新你的问题以便更清楚。

仅水平缩放响应图像

4 个答案: