css自适应布局,缩放保持图片比例

场景一

适合商品类展示型布局,后台的数据呈现列表数据返回,窗口宽度变化,图片比例不变.假设我们的图片宽高固定比例16:9。

效果图满屏:css自适应布局,缩放保持图片比例_第1张图片
效果图缩放时:
css自适应布局,缩放保持图片比例_第2张图片
移动端:
css自适应布局,缩放保持图片比例_第3张图片

直接看代码。里面会注释详细说明

<body>
  <!-- 多嵌套一层div.因为margin外边距设置为百分比%的话,它的基准是上一层dom的宽度 -->
  <div class="parentBox">
    <div class="parent">
    
      <div class="container">
        <img src="https://img0.baidu.com/it/u=399951341,1287964223&fm=253&fmt=auto&app=138&f=JPEG?w=994&h=500" alt="">
      </div>
      
      <div>
        <div ><span class="textOver">我是块级别3我是块级别3</span></div>
        <div><span class="textOver">我是块级别3我是块级别3</span></div>
        <div><span class="textOver">我是块级别3我是块级别3</span></div>
      </div>
    </div>
  </div>
</body>  


<style>
.parentBox{
    display: flex;
    flex-wrap: wrap;
 }
 .parent {
    width: 30%;/*这里想一行排三个。设置成了30%*/
    border-radius: 5px;
    margin-bottom: calc(10% / 2);/*间隙和水平保持一致*/
    background-color: #ffffff;
 }
 .parent:not(:nth-child(3n)) {
    margin-right: calc(10% / 2);/*剩下10%。为两个间隙平分*/
    
 }
 .container {
    width: 100%;
    padding-top: 56.25%; /*这里的百分比是上层(parent )的宽度为标准,这也是多嵌套一层原因*/
    /* 前提是图片宽高比例是16:9,所以这里是9/16。如果不理解,就记着反过来算 */
    position: relative;
 }
/*图片这里就要定位+padding-top或者padding-bottom*/
 .container img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
 }
 .textOver{
    /* 文字溢出省略 */
    display: -webkit-box!important;
    -webkit-box-orient: vertical!important;
    -webkit-line-clamp: 1!important;
    overflow: hidden!important;
 }
</style>

补充:css属性aspect-ratio: 16/9;(响应式网页设计中,保持一致的纵横比) 可以直接达到这种效果;不过兼容性不太好;如果项目没有兼容性要求;可以用

场景二:一行固定显示的。适用场景:比如移动端个人中心功能模块排列时。基于flex:1实现。始终占满布局

效果图css自适应布局,缩放保持图片比例_第4张图片

<body>
<!-- 一行固定元素个数 -->
  <div class="blockBox">
    <div class="blockItem">
      <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
      <div class="textCenter">标题1</div>
    </div>
    <div class="blockItem">
      <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
      <div class="textCenter">标题2</div>
    </div>
    <div class="blockItem">
      <img class="blockImg" src="https://img0.baidu.com/it/u=1089844382,2208108806&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
      <div class="textCenter">标题3</div>
    </div>
  </div>
</body>

<style>
.blockBox{
    display: flex;
  }
 .blockItem{
    flex: 1;
  }
 .blockImg{
    display: block;
    margin: 0 auto;
  }
 .textCenter{
    text-align: center;
  }
</style>
有问题欢迎讨论留言哦,虽然css简单。但是要精通还要多研究

你可能感兴趣的:(css,javascript,前端)