zoukankan      html  css  js  c++  java
  • 图片充满div

    <div style="height:270px;400px;border:2px black solid;">
        <img src="...">
    </div>

    object-fit解决方法:

    直接给img套用一个object-fit:cover;让img填满盒模型。

    div img{
        width: 100%;
        height: 100%;
        object-fit:cover;
    }

    这个方法很简单也很实用,也符合理论上对盒模型和IMG容器的解释。因为img本来也是一个容器,只不过它是公认的用来引导图片的容器,用替换法把图片替换成覆盖的尺寸就是我要的效果。这个思路在理论上都是正确的。
    但由于是新代码,在一些浏览器上还不兼容。回退机制上,如果浏览器不认识object-fit,那整个图片就会被强制拉伸成容器的尺寸。所以在回退机制上有待解决!

  • 相关阅读:
    洛谷 [SDOI2015]约数个数和 解题报告
    multiset-count
    multiset-begin
    multiset-begin
    set-value_comp
    set-value_comp
    multiset-constructors
    multiset-constructors
    set-upper_bound
    set-upper_bound
  • 原文地址:https://www.cnblogs.com/yourself/p/9453214.html
Copyright © 2011-2022 走看看