将图像大小调整为 div答案

【问题标题】：Resize the image to div将图像大小调整为 div
【发布时间】：2019-04-18 12:42:59
【问题描述】：

我有这个代码：

.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>

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

【问题讨论】：

【解决方案1】：

你能试试吗：

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

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

【讨论】：

【解决方案2】：

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

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

注意：先看看browsers是如何支持这个的

【讨论】：

【解决方案3】：

我会建议定期响应设置，如

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

【讨论】：