我想創(chuàng)建一些圖像占位符，停留1秒鐘，然后淡出顯示圖像。我使用的是通過讀取圖像寬度和高度生成的SVG。

圖像(和SVG)響應(yīng)迅速，適應(yīng)容器的大小。

我還想在容器內(nèi)的四個潛在不同位置隨機(jī)放置圖像:右、左(縱向)和上、下(橫向)。

在Chrome上，SVG被放在圖片的正上方，而在Safari上，SVG的內(nèi)部總是居中。

.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>

開著。需要切換的容器svg

max-width: 100%;
max-height: 100%;

存在；成為

width: auto;
height: 100%;

設(shè)置最大高度和/或最大寬度不成問題，但是它不告訴& ltsvg & gt你真正想要的尺寸。如果您使用開發(fā)工具，您將會看到，在您的原始代碼中,& ltsvg & gt占據(jù)了整個。容器和& ltrect & gt位于其中的中心。& lt的位置rect & gt在& ltsvg & gt是預(yù)期行為。如果你告訴了& ltsvg & gt若要占據(jù)其父級高度的100%，然后將寬度設(shè)置為auto，viewBox屬性將管理& ltsvg & gt代表你。

作為旁注，您不需要以下內(nèi)容。容器svg矩形

width: 100%;
height: 100%;