当将以下 CSS 属性添加到图像时，图像仍然占据与大小为 100% 时相同的空间？有没有办法让文本填充该图像周围的空间？
transform: scale(0.2);
height: auto;
float: right;
据我了解，这不是转换的工作原理。它仅改变外观visually;的实际尺寸original对象被维护。
您必须调整图像的宽度/高度而不是使用变换。
Demo in jsFiddle http://jsfiddle.net/w4xa9b4o/1/& 堆栈片段：
div {
background: #bae5fc;
overflow: hidden;
margin-bottom: 25px;
width: 40%;
float: left;
margin: 2%;
padding: 4px;
}
img {
float: right;
display: block;
transition: all 0.5s ease;
max-width: 50%;
}
.trans:hover img {
transform: scale(0.5);
}
.dimen:hover img {
max-width: 25%;
}
<div class="trans">
<img src="https://picsum.photos/400/200" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas sequi fugit quis ipsam veniam dicta sint aliquid magnam deleniti doloribus rerum laudantium eveniet expedita ipsa ducimus vero fuga optio dolor hic adipisci minima dolorem nemo mollitia?
Autem repellat minus aliquam odit magni deserunt quibusdam voluptas repellendus ipsum recusandae rem nisi dolor sunt veritatis quas sapiente maiores consectetur sequi laudantium saepe. Recusandae deserunt quidem rerum quia enim possimus sed iure aliquid
a consectetur magnam molestias voluptas vero nisi adipisci sequi libero natus illum facere praesentium deleniti tempora nam quas ducimus corporis maiores placeat expedita est cupiditate ipsam modi cumque quos eveniet totam illo nemo harum commodi
odio aliquam quo eaque pariatur. Minima eum deleniti impedit!
</p>
</div>
<div class="dimen">
<img src="https://picsum.photos/400/200" alt="" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas sequi fugit quis ipsam veniam dicta sint aliquid magnam deleniti doloribus rerum laudantium eveniet expedita ipsa ducimus vero fuga optio dolor hic adipisci minima dolorem nemo mollitia?
Autem repellat minus aliquam odit magni deserunt quibusdam voluptas repellendus ipsum recusandae rem nisi dolor sunt veritatis quas sapiente maiores consectetur sequi laudantium saepe. Recusandae deserunt quidem rerum quia enim possimus sed iure aliquid
a consectetur magnam molestias voluptas vero nisi adipisci sequi libero natus illum facere praesentium deleniti tempora nam quas ducimus corporis maiores placeat expedita est cupiditate ipsam modi cumque quos eveniet totam illo nemo harum commodi
odio aliquam quo eaque pariatur. Minima eum deleniti impedit!
</p>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
