我正在尝试调整背景图片以适合div。我遇到的问题是我希望图像适合div的高度并保持比例。例如,我有一个div,我不希望它进一步增加屏幕的宽度(以防止出现滚动条),而我想要使用的图像是1024px X 400px。如果我尝试适合图像的高度,它会迫使宽度也适合,它会失去比例。我不在乎图像的部分是否未显示。事实上,那正是我想要做的。
我需要使用哪些标签? HTML5和CSS调整图像大小,保持比例,html?
6
A
回答
5
使用CSS background-size: cover;
填补<div>
,或background-size: auto 100%;
如果你只是想企及的高度,并不在乎,如果双方过度或不足流量:
html,
body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
background-image: url(https://placebear.com/1024/400.jpg);
display: inline-block;
background-repeat: no-repeat;
border: 1px solid black;
}
.cover {
background-size: cover;
}
.center {
background-position: center;
}
.height {
background-size: auto 100%;
}
<h1>Unstyled</h1>
<div style="width: 50px; height: 200px"></div>
<div style="width: 200px; height: 50px"></div>
<div style="width: 125px; height: 125px"></div>
<h1>Un-centered</h1>
<h2>Cover</h2>
<div class="cover" style="width: 50px; height: 200px"></div>
<div class="cover" style="width: 200px; height: 50px"></div>
<div class="cover" style="width: 125px; height: 125px"></div>
<h2>100% Height</h2>
<div class="height" style="width: 50px; height: 200px"></div>
<div class="height" style="width: 200px; height: 50px"></div>
<div class="height" style="width: 125px; height: 125px"></div>
<h1>Centered</h1>
<h2>Cover</h2>
<div class="cover center" style="width: 50px; height: 200px"></div>
<div class="cover center" style="width: 200px; height: 50px"></div>
<div class="cover center" style="width: 125px; height: 125px"></div>
<h2>100% Height</h2>
<div class="height center" style="width: 50px; height: 200px"></div>
<div class="height center" style="width: 200px; height: 50px"></div>
<div class="height center" style="width: 125px; height: 125px"></div>
另外,如果您想剪裁图像以便中心始终是焦点而不是左上角,请使用background-position: center;
。
1
如果你可以降低你的比门槛一点,你也可以使用:
img {
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
}
相关问题
- 1. 调整图像大小保持比例
- 2. HTML/CSS图像调整大小比例
- 3. 调整图像的大小,同时保持比例
- 4. 调整图像大小 - 保持比例 - 添加白色背景
- 5. CSS图像调整大小,同时保持成比例
- 6. 如何调整图像大小,但保持与JavaScript的比例?
- 7. rmagick调整图像保持比例
- 8. webkit:按比例调整图像大小
- 9. 比例图像调整大小
- 10. 比例图像调整大小
- 11. 保持图像比的网格内的在调整大小
- 12. App Engine图像大小调整不保持高宽比?
- 13. 图像调整大小没有裁剪和保持长宽比
- 14. 调整图像大小和保持长宽比
- 15. PHP调整图像大小保持高宽比
- 16. 将图像大小调整为平方div保持长宽比
- 17. 通过保持宽高比调整图像大小 - 循环
- 18. 调整图像大小,同时保持宽高比的Java
- 19. 调整图像大小并保持纵横比
- 20. 调整图像大小并保持长宽比
- 21. 动态调整图像大小并保持宽高比
- 22. 调整图像大小保持高宽比白线边框
- 23. 在保持纵横比的同时调整图像大小
- 24. Java的图像大小调整,保持纵横比
- 25. 如何重新调整图像大小并保持长宽比
- 26. 调整图像大小 - 保持宽高比
- 27. 在PHP中调整图像大小,保持比例,透明度和居中
- 28. 的Python:调整图像大小:保持比例 - 加白色背景
- 29. 使用窗口宽度调整图像大小,但保持比例
- 30. iPhone开发:任何片段来调整图像大小,并保持比例?