一、使用CSS背景属性
1. 背景自适应
.bg-tns {
background-image: url('img/xxx.jpg');
background-size: cover;
background-position: center;
min-height: calc(100vh - 100px); /* 确保至少为视口高度 */
}
2. 背景缩放
.logo {
width: 250px; /* 根据图片大小及位置区域的长度，自动限制 */
height: auto;
object-fit: cover;
}
二、使用CSS布局属性
1. 流体网格布局
.container {
width: 90%;
margin: 0 auto;
}
.column {
float: left;
width: 50%; /* 这将使两列布局在大屏幕上各占50%宽度 */
}
@media (max-width: 600px) {
.column {
width: 100%;
}
}
2. 相对单位
body {
font-size: 16px;
}
h1 {
font-size: 2em; /* 这将使标题的字体大小为32px */
}
.container {
padding: 1rem; /* 与根元素的字体大小成比例 */
}
使用em、rem和百分比等相对单位来定义尺寸和间距，使布局更加灵活。
三、使用CSS3属性
1. object-fit属性
img {
border: 2px solid #333;
display: block;
max-width: 100%;
object-fit: cover;
}
2. object-position属性
img {
object-position: 50% 50%; /* 将图片居中显示 */
}
object-position属性用于指定替换元素内容在元素框内的对齐方式。