时间戳

首页 > 解决方案 > 使用 url() 作为内容值时无法调整图像大小

html - 使用 url() 作为内容值时无法调整图像大小

问题描述

我正在尝试更改插入图像的尺寸，但没有成功。有任何想法吗？

.cricket:before {
  content: url("https://i.ytimg.com/vi/B3VH- vDrMwo/maxresdefault.jpg");
  height: 10px;
  width: 10px;
}
<div class="earth">
  <p> I love earth </p>
</div>
<div class="cricket">
  <p> I love cricket </p>
</div>

标签： htmlcssurl

解决方案

选择:before器必须将display属性设置为另一个值（例如block），以便将widthandheight考虑在内。

另外：该content属性应包含文本，而不是图像。如果要显示图像，可以使用background-image. 像这样：

.cricket:before{
   content: '';
   display: block;
   background-image:url(https://i.ytimg.com/vi/B3VH-vDrMwo/maxresdefault.jpg);
   background-size: cover;
   height: 100px;
   width: 100px;
}

小提琴

推荐阅读