CSS图片宽度设置百分比 , 高度同宽度相同

发布时间:2017-7-1 11:44:05编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"CSS图片宽度设置百分比 , 高度同宽度相同 ",主要涉及到CSS图片宽度设置百分比 , 高度同宽度相同 方面的内容,对于CSS图片宽度设置百分比 , 高度同宽度相同 感兴趣的同学可以参考一下。

在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦。

这里通过 css 来达到我们想要的效果:

<div class='box'>    <img src="..."></div>

需要添加一个父元素来达到我们的目的。

.box {    position: relative;    width: 50%;}.box:before {    content: "";    display: block;    padding-top: 100%;}

或者:

.box{    position: relative;    width: 50%;    height: 0;    padding-bottom: 50%;}

我们在这里定义了一个伪元素并且将其 padding-top 设置为 100%,因为这里的 padding-top 是相对于元素的 width 的。

现在我们定义了一个 .box 元素,它的长和宽是相等的,现在我们只需要设置 img 的 CSS 即可:

.box img {    position:  absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}


上一篇:android 闹钟设置问题
下一篇:guava eventbus代码分析(二)

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款