html - 调整图像大小以在CSS中自动调整div

标签 html css

<分区>

我对编码非常陌生,希望在 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;
}

最佳答案

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

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>

关于html - 调整图像大小以在CSS中自动调整div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59576359/

上一篇:html - 如何使用 css 将 Accordion 列表拆分为两列并使用react?

下一篇:html - react 图像加载问题。一帧一帧

相关文章:

html - 将内容包装在 div 中

html - Bootstrap 布局中的垂直对齐文本

HTML/CSS 左右 div 在 Chrome 上并排,但在 Safari/Firefox 上不是

jquery - 单击时淡入不同的背景图像

html - 为什么我的背景色比我设置的要深?

html - Firefox 绝对位置不同于 Chrome

jquery - IE7 中的 Z-INDEX 问题

html - 导航栏(菜单)被正文元素重叠

html - :after pseudo element is not showing up

javascript - 从下一个 td [jQuery] 中选择隐藏的输入