Невозможно изменить размер изображения при использовании url () в качестве значения содержимого - PullRequest
Новая
       1

Невозможно изменить размер изображения при использовании url () в качестве значения содержимого

0 голосов
/ 24 августа 2018

Я пытаюсь изменить размеры вставленного изображения, но безуспешно. Есть идеи? 

.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>

Ответы [ 3 ]

0 голосов
/ 24 августа 2018

Вы неправильно понимаете, что делает content.Вам нужно установить пустой контент, отобразить элемент как элемент уровня блока и использовать background: 

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

<div class="cricket">
  <p> I love cricket </p>
</div>
0 голосов
/ 24 августа 2018

посмотрите на это .....

http://jsfiddle.net/2c6qhu5e/14/

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="earth">
<p> I love earth </p>
</div>

<div class="cricket">
<p> I love cricket </p>
</div>

</body>
</html>

    .cricket:before{
  position: absolute;
   top:0;
    left:0;
    content: " ";
    background: url(https://i.ytimg.com/vi/B3VH-vDrMwo/maxresdefault.jpg);
    background-size: 100% 100%;
    width: 400px;
    height: 400px;
    margin: 2px;
    float: left;
}
0 голосов
/ 24 августа 2018

Селектор :before должен иметь свойство display, установленное в другое значение (например, block), чтобы учитывать width и height.

Также: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;
}

Скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...