html - 我可以缩放图像以超出其绑定的框吗？

Question

我正在尝试<img>动态调整大小。有时我需要该图像超越它所绑定的框，但它似乎停止并扭曲。这可以做到吗？

<div>
 <img src='smjpg.jpg' />
</div>

div{
  width: 20px;
}
img{
  width: 100px;
}

Answer 1

只需使用 CSS 作为边界div。

#imgDiv {
    overflow:visible;
}

Answer 2

如果您仍然希望父容器为其他元素增长，没有固定大小，请考虑使用float属性或position: absolute子元素。绝对定位将子元素从页面流中移除，因此父容器将看不到任何可展开的内容。浮动具有类似的视觉效果，只要溢出是可见的并且没有使用 clearfix，但是子元素确实会影响其兄弟元素的布局。这是一个演示： http: //jsfiddle.net/lpd_/rd4HP/3/（尝试调整结果宽度）。