Question

我尝试使用“img src”方法将具有特定维度的转换后的图像放入div中。因此，必须在内部红色边界div仅转换图像切割。但是当你看到外面的图像重叠时......我在想什么？感谢

CSS＆GT;

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＆GT;

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

fiddle

Answer 1

您只是遗漏了overflow: hidden;元素

中的div

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

根据我的理解，您希望image位于height and width的{{1}}内，如果是，那么在这些情况下将parent div添加到overflow:hidden，因此，这会停止parent div溢出。

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

＆＃13;

child element

＆＃13;

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

＆＃13;

Answer 3

你可以使用overflow：隐藏在肖像中：

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

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

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

div内部的转换图像

4 个答案: