如果有人能帮助我并告诉我如何用 CSS/HTML 制作背景封面,我将不胜感激。
我打算做的是制作一个 100% 宽度和 270 像素高度的封面,这将适合并且不会拉伸(stretch)我的图像,我不介意它是否缩放它,但保持正确的比例。
例子:
<div class="cover">
<img src="link.jpg">
</div>
里面的图片应该适合 100% 宽度和 270px 高度以及良好的比例。这可能吗?
最佳答案
保留现有的 HTML
CSS:
.cover {
width: ... /* whatever width you want for the cover div */
height: 270px;
background-color: white; /* optional */
overflow: hidden;
}
.cover > img {
width: 100%;
}
此外,如果你想在 div 中将图像垂直居中(从设计的 Angular 不推荐,但管它呢)
.cover > img {
width: 100%;
position: relative;
top: 50%;
margin-top: -50%;
}
关于html - 如何使用 CSS/HTML 制作 Facebook 封面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17418703/