将图片大小调整为 div

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

Resize the image to div