overflow和absolute之间的问题，transfrom可以解决

weixin_30830327

于 2017-10-25 10:41:00 发布

阅读量375

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moxiaowohuwei/p/7727647.html

本文介绍了如何使用CSS实现图片在不同容器内的缩放效果，包括直接对图片应用transform属性、对包含图片的容器进行transform操作以及在图片和容器间加入内嵌元素进行transform。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS代码：

.overflow { width: 191px; height: 191px; border: 2px solid #beceeb; overflow: hidden; }
.overflow img { position: absolute; }
.transform { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

HTML代码：

<p><strong>图片自身transform</strong></p>
<div class="overflow">
    <img src="mm1.jpg" class="transform" />
</div>
<p><strong>overflow容器transform</strong></p>
<div class="overflow transform">
    <img src="mm1.jpg" />
</div>
<p><strong>overflow和图片之间内嵌元素transform</strong></p>
<div class="overflow">
    <div class="transform">
        <img src="mm1.jpg" />
    </div>
</div>