Question

我有此代码：

.post-container {
  overflow: auto
}

.post-thumb {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.post-thumb img {
  min-width: 100%;
}

<div class="post-container">
  <div class="post-thumb"><img src="../images/logo.png" /></div>
</div>

我想展示不应拉伸的图像。但是，由于图像很长，因此侧面现在创建了一个滚动框来按宽度滚动图像。

Answer 1

您可以尝试：

.post-thumb img {
  width:100%;
  min-height: 1px;
  display: block;
}

告诉我这是否对您有所帮助或有所改变。

Answer 2

您可以使用CSS样式缩放图像：

.post-thumb img{
  transform: scale(2,6); // example scale ( width, heigth )
}

注意：首先看看browsers如何支持

Answer 3

我建议像这样定期进行响应式设置

.post-thumb img {
  display: block;
  max-width: 100%;
  height: auto;
}

将图像调整为div

3 个答案: