我想创建一些图像占位符,停留1秒,然后淡出显示图像。我使用的SVG是通过阅读图像的宽度和高度生成的。
图像(和SVG)是响应的,适应于容器大小。
我还想将图像随机放置在容器中的四个可能的不同位置:右、左(用于纵向)和顶、底(用于横向)。
在Chrome上,SVG被放置在图像的正上方,而在Safari上,SVG的内部总是居中。
.container {
width: 100%;
height: 100%;
display: flex;
position: relative;
}
.container img {
max-width: 100%;
max-height: 100%;
}
.continer svg {
max-width: 100%;
max-height: 100%;
position: absolute;
}
.container svg rect {
width: 100%;
height: 100%;
}
<div class="container position-top">
<svg viewBox="0 0 63.863757317722 100" xmlns="http://www.w3.org/2000/svg">
<rect width="1200" height="1879"></rect>
</svg>
<img src="image.jpg" alt="">
</div>
下面是一个codepen:https://codepen.io/bbbellon/pen/PoxYQpP
1条答案
按热度按时间bis0qfac1#
在
.container svg
上,您需要切换成为
设置
max-height
和/或max-width
不是问题,但它不会告诉<svg>
您实际希望它是什么大小。如果您使用开发工具,您将看到,在原始代码中,<svg>
占用了整个.container
,而<rect>
位于其中的中心。<rect>
在<svg>
中的放置是预期行为。如果您告诉<svg>
占用其父节点高度的100%,然后将宽度设置为auto
,则viewBox
属性将代表您管理<svg>
的缩放。附带说明一下,在
.container svg rect
上不需要以下内容