css之实现图片自适应

最新推荐文章于 2024-07-22 16:37:55 发布

Welkin_qing

最新推荐文章于 2024-07-22 16:37:55 发布

阅读量3.9k

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/Welkin_qing/article/details/112573761

版权

css 专栏收录该内容

29 篇文章

订阅专栏

博客介绍了利用CSS实现图片自适应及正方形显示的方法。一是用position实现图片自适应，可隐藏多余部分并按固定宽高自适应；二是采用padding补偿法，通过background-image实现自适应；还提及了图片以正方形显示的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原图如下：

在开发中，想在固定的高度和宽度中显示不一样的图片时，就会出现压缩，导致图片最后显示不好看，以下提供几种方法进行调整：

一、position实现图片自适应

<div class="father1">
    <img src="../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg" alt="">
  </div>

css如下：

    .father1 {
      width: 300px;
      height: 400px;//修改这里即可
      border: 1px solid black;
      margin: 20px auto;
      position: relative;
      display: block;
      overflow: hidden;


    }

    .father1>img {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      transform: translate(-50%, -50%);
      height: 100%;
    }

最后结果显示：
隐藏了左右多余的图片，且做到了根据固定的高度和宽度进行自适应
在这里插入图片描述

二、padding补偿法

使用background-image实现图片自适应

 <div class="border_img">
      <div class="inline_img"></div>
 </div>

.border_img {
        width: 300px;
        height: 400px;//修改宽高时，需要修改padding-top的值
        border: 1px solid #000;
      }

      .inline_img {
        padding-top: 133.3%;//使用高度除以宽度
        background-image: url('../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg');
        background-size: cover;
        background-position: center;
      }

结果显示：
在这里插入图片描述

三、图片以正方形显示

<style>
 .image-container1 {
      background: url('../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg') 50% 50% no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      width: 70px;
      height: 70px;
    }
</style>
<div class="image-container1"></div>

结果显示：
在这里插入图片描述
换为另一种实现方式为：

.image-container1 {
      /* 50% 50% 无法确认为是size还是position的值 */
      background-image: url('../../Desktop/picture/3fl7g412z71hvsv6o5tk0ngaw.jpg');
      background-position: 50% 50%;
      background-size: cover;
      background-repeat: no-repeat;
      width: 70px;
      height: 70px;
      //当然后续可以添加圆角，边框，使其显示为自己想要的形式
      /* border-radius: 50%; */
      /* border: 1px solid black; */
    }