gpt4 book ai didi

html - 将图像完全放入框中

转载 作者:行者123 更新时间:2023-11-28 02:06:17 24 4
gpt4 key购买 nike

我在这里尝试添加一个图像,使其完全适合 div#image-container。我正在使用 CSS 样式:

background-repeat: no-repeat;
background-size: cover;

这有助于将宽度正确地适合 div,但不是高度。我该如何解决这个问题?

我添加了以下代码段:

#image-container {
width: 90%;
height: 350px;
border: 13px solid gold;
box-sizing: border-box;
margin-left: 5%;
margin-top: 18px;
box-shadow: 0px 0px 7px 3px #000;
/*position: relative;*/
background-image: url(/image/Aixcp.jpg);
background-repeat: no-repeat;
background-size: cover;
}
<div id="image-container">
</div>

最佳答案

background-size: 100% 100%; 解决了问题

#image-container {
width: 90%;
height: 350px;
border: 13px solid gold;
box-sizing: border-box;
margin-left: 5%;
margin-top: 18px;
box-shadow: 0px 0px 7px 3px #000;
/*position: relative;*/
background-image: url(/image/Aixcp.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div id="image-container">
</div>

关于html - 将图像完全放入框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48997710/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com