对不起,我不能给标题带来完美的含义。 您可以在 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 尺寸太大了,但我不知道确切的问题是什么。
最佳答案
这就是响应式图片的概念。
请引用下面的链接来解决您的疑问
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
关于html - 如何使图像适合视口(viewport)比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53995833/