美文网首页
img 自适应

img 自适应

作者: Cissy_fba3 | 来源:发表于2019-05-03 23:06 被阅读0次

1.width:100%;高度自适应;

<style>
    div{width: 200px;}
    div img{width: 100%;}
</style>
<div>
    <img src="xxxx.png" />
</div>

2.通过给div设置background实现自适应

<style>
    div{
        width: 200px;
        height: 200px;
        background: url('xxxx.png') no-repeat;
        background-size: cover;
        background-position: center center;
    }
</style>
<div></div>

优点:不会造成图片变形;缺点:图片可能显示不完全。

相关文章

  • img 自适应

  • img 自适应

    1.width:100%;高度自适应; 2.通过给div设置background实现自适应 优点:不会造成图片变形...

  • bootstrap笔记

    1、图片自适应 加类名 ;img-responsive; 2、按钮自适应 加类名:btn-block; 3、boo...

  • CSS开发技巧

    让图片自适应容器(div)大小 img {width: 100%;height: 100%;max-width: ...

  • CSS响应式布局技巧

    让图片自适应容器(div)大小img {width: 100%;height: 100%;max-width: 1...

  • CSS3图片自适应

    用div元素将img包裹住,采用padding-top属性可以使图片自适应缩放

  • img标签图片自适应的样式

    img标签图片自适应的样式[https://www.cnblogs.com/edczjw-Edison/p/126...

  • css实现图片自适应容器的几种方式

    css实现图片自适应容器 经常有这样一个场景,需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到...

  • img自适应容器大小

    有这样一个场景:如何让img自适应容器(div)图片,必须等比缩放 在我们一般的使用过程中可能会 但是如此使用我们...

  • 处理富文本内容中的图片显示

    /** * 处理富文本里的图片宽度自适应 * 1.去掉img标签里的style、width、height属性 * ...

网友评论

      本文标题:img 自适应

      本文链接:https://www.haomeiwen.com/subject/kkltoqtx.html