Question

对不起，我无法为标题带来完美的含义。您可以在http://dainielhhong.com/page1.html

上测试代码

无论屏幕大小如何，我都希望使裂缝和盒子适合。

它适合我的显示器，但是当我改变屏幕尺寸时，裂纹会向上或向下。

.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

Answer 2

尝试此CSS修复程序

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

如何使图像适合视口比例

2 个答案: