响应式图片
响应式图片会自动适配各种尺寸的屏幕。
img {
max-width: **;
height: auto;
}
图片文本
.container {
position: relative;
}
?
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
卡片式图片(有阴影效果)
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: **}
div.container {
text-align: center;
padding: 10px 20px;
}