容器宽高不确定，图片宽高不确定，css如何实现图片响应式？

JeOam 发布于2019-08-29 16:39 / 2438人阅读

摘要：那如何做到图片随容器宽度变化而变化呢就像下面图片的效果这里面的张图片在不同宽度的容器里，图片的宽高比始终保持不变实现原理让图片脱离标准文档流，这样就可以设置图片的高度为然后再设置包裹图片的父容器的或，这样图片才能有高度并且一直保持这个比例。

图片响应式

在响应式开发中最烦恼的应该就是图片了，虽然图片设置max-width: 100%;可以让图片宽度占满容器，但是高度就不能自适应了。如果将容器高度限死，那么我们就要使用媒体查询来控制容器的高度，这样才能保证容器宽高成比例。那如何做到图片随容器宽度变化而变化呢？就像下面图片的效果

这里面的4张图片在不同宽度的容器里，图片的宽高比始终保持不变

实现原理

让图片脱离标准文档流，这样就可以设置图片的高度为100%,然后再设置包裹图片的父容器的paddingTop或paddingBottom，这样图片才能有高度并且一直保持这个比例。

示例代码

容器云图片实际宽高 js背景图片设置宽高 html容器设定宽高如何确定深度学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113886.html

容器宽高不确定，图片宽高不确定，css如何实现图片响应式？

摘要：那如何做到图片随容器宽度变化而变化呢就像下面图片的效果这里面的张图片在不同宽度的容器里，图片的宽高比始终保持不变实现原理让图片脱离标准文档流，这样就可以设置图片的高度为然后再设置包裹图片的父容器的或，这样图片才能有高度并且一直保持这个比例。图片响应式在响应式开发中最烦恼的应该就是图片了，虽然图片设置max-width: 100%;可以让图片宽度占满容器，但是高度就不能自适应了。如果...

whinc 2019-08-02 16:04 评论0 收藏0
03.Android之View原理问题

摘要：这种自定义控件在原生控件提供的方法外，可以自己添加一些方法。从顶层父到子递归调用方法，方法又回调。目录介绍 3.0.0.1 View的绘制需要经过哪些过程？有哪些常用回调方法？View的绘制流程的详细流程是怎样的？ 3.0.0.2 View绘制流程，当一个TextView的实例调用setText()方法后执行了什么？请说一下原理…… 3.0.0.3 requestLayout()、...

FrozenMap 2019-08-16 14:14 评论0 收藏0
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

摘要：那想要优化这一点，唯一的方法就是利用内容高度来撑开而非，这个方案跟消除浮动所用的方案非常相似给容器添加一个子元素伪元素，并把子元素伪元素的设为，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是t...

wenzi 2019-08-28 18:28 评论0 收藏0
一些居中方式的总结

摘要：居中水平居中对于子元素是行内元素或者时使用父元素宽度无论确定不确定均可实现相对于父元素水平居中。居中水平居中对于子元素是行内元素(或者inline-block)时使用text-aling: center; ,父元素宽度无论确定不确定,均可实现相对于父元素水平居中。 .box { border:1px solid #aaa; text-alig...

renweihub 2019-08-29 15:13 评论0 收藏0