CSS在div中保留高度和裁剪宽度
CSS在div中保留高度和裁剪宽度
提问于 2018-08-23 17:02:49
我已经找了一段时间了，我还是找不到确切的答案。我有一个<div>，它的宽度占屏幕的100%，高度固定在600px。我想添加一个背景图片到div的图片高度适合<div>的高度(600px，没有图片裁剪)。每当我修改屏幕的宽度时，高度应该始终保持为600px。然后图片将居中，并在宽度方向上进行裁剪。
回答 3
Stack Overflow用户
发布于 2018-08-23 17:19:00
试试这个：
.container {
width: 100%;
height: 600px;
background: url('https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
}<div class="container"></div>
Stack Overflow用户
发布于 2018-08-23 17:09:14
你试过了吗
`
background-image: url('your-image.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
`Stack Overflow用户
发布于 2018-08-23 17:19:11
我想这就是你要找的：
body {
margin: 0px;
padding: 0px;
}
div {
width: 100vw;
height: 600px;
background: url('https://wallpaperbrowse.com/media/images/704532.jpg') no-repeat;
background-size: 100% 600px;
float: left;
background-position: center;
}<div>
test
</div>
希望这对你有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51982009
复制相关文章
相似问题
腾讯云开发者
