html - 如何使图像适合视口(viewport)比例

Question

对不起，我不能给标题带来完美的含义。您可以在 http://dainielhhong.com/page1.html 测试代码

无论屏幕大小如何，我都想使 crack 和 box fit。

它适合我的显示器，但当我改变屏幕尺寸时裂纹会增加或减少。

.parent-container{
  margin: auto;
  margin-top: 2vh;
  width: 67vw;
  height: 85.81vh;
  border-top: 2px black solid;
  border-left: 2px black solid;
  border-right: 2px black solid;
}
.container{
  display: flex;
}
.item:nth-child(1){
  flex: 1;
  height: 28vh;
  border-right: 2px black solid;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;

}
.item:nth-child(2){
  flex: 2.6;
  height: 28vh;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;

}
.item:nth-child(3){
  flex: 1;
  height: 28vh;
  border-left: 2px black solid;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;

}

img{
  width: 100%;
  margin-top: -50%;
}

<div class = "parent-container">
  <div class = "container">
    <div class = "item"></div>
    <div class = "item"></div>
    <div class = "item"></div>
  </div>
  <img src="http://dainielhhong.com/page1.html">
</div>

我认为问题来了，因为 svg 尺寸太大了，但我不知道确切的问题是什么。

Answer 1

这就是响应式图片的概念。

请引用下面的链接来解决您的疑问

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images