css百分比实现响应式布局图片

作者: u14e | 来源:发表于2018-02-08 17:09 被阅读146次

通常一些轮播，或者一些顶部的封面图都需要根据设备宽度来调整图片显示的大小，而不是写死容器高度。如下图

image.png

所以可以通过如下方式实现，

position: relative;
width: 100%;
height: 0;
padding-top: 40%;

然后子元素

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

其中padding-top中的百分比是按照父元素的宽度的百分比计算的，比如父元素width为375px，则padding-top: 150px

关于css样式的百分比都相对于谁，可以看看知乎上面的讨论https://www.zhihu.com/question/36079531

grid实现响应式布局
一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局在这篇文章中，我将教你如何使用 CSS G...
现代CSS 实现照片画廊布局
我们经常会遇到不同布局的照片墙展示图片，下面来使用纯CSS 实现照片墙。响应式布局Responsive Layo...
css百分比实现响应式布局图片
通常一些轮播，或者一些顶部的封面图都需要根据设备宽度来调整图片显示的大小，而不是写死容器高度。如下图所以可以通过...
SegmentFault 周报第 34 周 - 前端、后端、移动
前端开发： CSS 百分比 padding 实现比例固定图片自适应布局http://t.cn/RCLcmkI 【译...
flex布局
flex布局网页布局（layout）是 CSS 的一个重点应用。Flex 布局，可以简便、完整、响应式地实现各种页面布局
VUE响应式原理
VUE响应式原理这里的响应式(Reactive)不同于CSS布局的响应式(Responsive), 这里的响应式...
CSS基础布局
CSS布局盒模型 Flexbox 使用float布局 inline-block 布局响应式设计和布局 CSS面...
[读]响应式布局：CSS3弹性盒flex布局模型
响应式布局：CSS3弹性盒flex布局模型
流式布局和响应式布局的见解
流式布局在CSS2时代就有，主要是靠百分比进行排版，可以在不同分辨率下显示相同的版式响应式布局的关键技术是CSS...
@media
css3中我们可以使用@media来实现响应式布局 1. 语法 @media mediaType and|not|...