当下列CSS属性添加到图像中时,图像仍占据其以100%大小调整时的相同空间?有没有办法使文本填充围绕此图像的空间?
transform: scale(0.2);
height: auto;
float: right;
据我所知,transform并不是这样工作的。它只会在视觉上改变外观;原始对象的实际尺寸将保持不变。
您需要调整图像的宽度/高度而不是使用transform。
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>