在css中调整图像大小以自动调整div [重复]

Posted 2023-03-06

【中文标题】在css中调整图像大小以自动调整div [重复]

【英文标题】：Resizing image to autofit div in css [duplicate]

【发布时间】：2020-04-21 21:17:19

【问题描述】：

我对编码非常陌生，并且希望在 CSS 中自动调整 div 中的图像。我写的代码只是在CSS中为div添加了背景图片，所以没有在主html代码中引用图片文件。

有没有办法在 div CSS 中调整图像的大小，或者我需要将它分离成 div CSS，然后是图像 CSS（我希望我说得通！）。

或者如果有更有效的完全不同的方法，请告诉我 - 任何帮助将不胜感激！

.test 
    border: 2px dashed #0087F7;
    background-color: #DCDCDC;
    background-image: url('download.png');
    background-repeat: no-repeat;
    background-position: center;

【问题讨论】：

这能回答你的问题吗？ Stretch and scale a CSS image in the background - with CSS only

如果你想使用背景图片查看第一个副本，如果你想使用实际图像标签，那么我会使用对象拟合 - 查看第二个副本

【参考方案1】：

您可以使用background-size 中的属性contain 和cover 来控制背景的大小。您还可以设置百分比。

div 
  width: 150px;
  height: 50px;
  display: inline-block;
  border: 1px solid;
  background: url("https://picsum.photos/150/150");
  background-repeat: no-repeat;
  background-position: center;


.cover 
  background-size: cover;


.contain 
  background-size: contain;

<div class="cover"></div>
<div class="contain"></div>