Question

我有这样的代码-

<span class="cropper-view-box" style="width: 500px; height: 500px;">
<img src="https://www.popsci.com/sites/popsci.com/files/styles/1000_1x_/public/images/2018/03/senna.jpg" style="width: 100%;opacity: 0.5;">

<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" style="width: 466.667px; height: 350px;">
</span>

我希望第一张图片不要占用任何空间。因此，第二张图片将位于第一张图片的顶部。但是第一个图像应具有跨度的100％宽度。如何实现呢？尝试将位置设为绝对，左为0，没有帮助。

Answer 1

您快到了。您需要同时使用left:0;和top:0;才能将其放置在左上角。我想这就是您要寻找的东西：

<span class="cropper-view-box" style="width: 500px; height: 500px;">
<img src="https://www.popsci.com/sites/popsci.com/files/styles/1000_1x_/public/images/2018/03/senna.jpg" style="width: 100%;opacity: 0.5;">

<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" style="width: 466.667px; height: 350px; position:absolute; left:0; top:0;">
</span>

如果要确保跨度保持在500宽度和500高度之内。添加：display:block;。这使跨度像div一样起作用。然后您将得到：

<span class="cropper-view-box" style="width: 500px; height: 500px; display:block;">
<img src="https://www.popsci.com/sites/popsci.com/files/styles/1000_1x_/public/images/2018/03/senna.jpg" style="width: 100%;opacity: 0.5;">

<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" style="width: 466.667px; height: 350px; position:absolute; left:0; top:0;">
</span>

此外：

请考虑添加样式表以添加样式并使用类，就像您对cropper-view-box所做的一样。

制作全幅图像，不会占用空间

1 个答案: