div内的转换图像答案

【问题标题】：transformed image inside divdiv内的转换图像
【发布时间】：2017-04-19 00:20:49
【问题描述】：

我尝试使用“img src”方法将转换后的图像放入具有特定尺寸的 div 中。因此，必须在红色边框的 div 内仅转换图像。但正如你看到的图像重叠在外面......我错过了什么？谢谢

css>

img {
    max-width: 100%;
    max-height: 100%;
    transform: scale(2.5);
    transform-origin: 0 0;
}

.portrait {
    height: 125px;
    width: 200px;
    border: 2px red solid;
}

html>

<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

fiddle

【问题讨论】：

把max-width改成width
你只想看到 div 里面有什么？或者您希望图像适合 div？

标签： html css

【解决方案1】：

你只在div元素中缺少overflow: hidden;

img {
  max-width: 100%;
  max-height: 100%;
  transform: scale(2.5);
  transform-origin: 0 0;
}

.portrait {
  overflow: hidden;
  height: 125px;
  width: 200px;
  border: 2px red solid;
}

<div class="portrait">
  <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

【讨论】：

【解决方案2】：

据我了解，您希望image 位于分配的parent div 中的height and width 内，如果是这样，则在这些情况下将overflow:hidden 添加到parent div，从而停止child element 的溢出。

overflow属性指定是否剪辑内容、渲染滚动条或仅在溢出其块级别时显示内容容器。

img {
    max-width: 100%;
    max-height: 100%;
    transform: scale(2.5);
    transform-origin: 0 0;
}

.portrait {
    height: 125px;
    width: 200px;
    border: 2px red solid;
    overflow:hidden;
}

<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

【讨论】：

【解决方案3】：

你可以使用overflow:隐藏在头像里面：

.portrait {
  height: 125px;
  width: 200px;
  border: 2px red solid;
  overflow: hidden;
}

使用此属性，内容被剪裁，当内容大于容器时不提供滚动条。

【讨论】：

【解决方案4】：

好的，我想我明白了。你应该这样做：

img {
    width: 100%; // Edited
    height: auto; // Edited
    display:block; // Edited
    transform: scale(2.5);
    transform-origin: 0 0;
}

.portrait {
    height: 125px;
    width: 200px;
    border: 2px red solid;
    overflow:hidden;
}

【讨论】：