css图片宽高自适应盒子（宽＞高就限制宽，高＞宽就限制高）

最新推荐文章于 2024-09-08 09:55:18 发布

_小郑有点困了

最新推荐文章于 2024-09-08 09:55:18 发布

阅读量3k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_44706619/article/details/117325160

版权

css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文探讨了前端图片展示的技巧，建议避免写死图片宽高，采用百分比和object-fit属性来保持图片比例。通过示例代码展示了如何创建一个适应不同宽高比图片的布局，并指出这种布局可能不适合需要在图片上进行坐标操作的情况。

摘要由CSDN通过智能技术生成

效果图：

宽>高就限制宽即宽度100% ，高度自动。例如：19201088

高>宽就限制高即高度100%，宽度自动。例如：19442592

很多时候图片宽高比不固定，而且作为一个前端，最好不要去写死图片的宽高。会给自己找麻烦。
在这里插入图片描述

html：

<div class="boxs">
   <div class="devices-box">
     <div class="image-box">
       <img src="./car.jpg" alt="">
     </div>
   </div>
   <div class="devices-box">
     <div class="image-box">
       <img src="./car1.jpg" alt="">
     </div>
   </div>
 </div>

css代码如下：

 .boxs{
  display: flex;
  }
  .devices-box{
    width: 23%;
    height: 234px;
    background: #ccc;
    box-sizing: border-box;
    margin-right: 20px;
  }
  .image-box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  img{
    max-width: 100%;
    max-height: 100%;
    object-fit: scale-down;
  }