• 使用CSS实现将图片长宽设置为相等并且自适应屏幕
  • JockoLi 发表于 2016/2/25 8:38:00 | 分类标签: CSS 自适应屏幕 图片
  • 在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦。

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

    HTML:

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

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

    CSS:

    .box {
        position: relative;
        width: 50%;        /* desired width */
    }
    .box:before {
        content: "";
        display: block;
        padding-top: 100%;     /* initial ratio of 1:1*/
    }
    

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

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

    .box img {
        position:  absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:JockoLi
  • 加入时间:2014/6/1 14:40:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮