Как избавиться от поля по умолчанию вокруг изображения внутри div? - PullRequest
Новая
       2

Как избавиться от поля по умолчанию вокруг изображения внутри div?

2 голосов
/ 14 апреля 2019

Я создаю несколько веб-сайтов и всегда имею ту же проблему с CSS.

У меня есть два изображения в контейнере div.

Когда я помещаю, например, текст в div, div берет высоту текста, но когда я вставляю изображение для некоторых для менянеизвестная причина, почему у div, кажется, есть высота по умолчанию.

Как вы можете видеть, я сделал размер изображений адаптивным в моем CSS.Я включил цвет в div, чтобы дать более четкое представление о том, что происходит.

Когда я сужаю экран своего браузера, высота div остается одинаковой (таким образом, не реагирующей), и по какой-то причине изображениянажал внутри div.

  1. Как я могу решить эту проблему. Я хочу, чтобы высота контейнера div была чувствительной, поскольку изображения внутри нее имеют ту же высоту, что и изображения, и поскольку я сужаю экран браузера.
  2. И последнее, но не менее важное ... что я не понимаю?

Спасибо, что помогли мне.

Мой код 

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<div style="background-color:red;">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">   
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">   
</div>

</body>

</html>

Ответы [ 4 ]

0 голосов
/ 14 апреля 2019

Вы должны попробовать добавить display: block; к тегу <img>.

Надеюсь, это поможет.

Если вы не используете Bootstrap или другую платформу css, возможно, вам нужно добавить файл reset.css в ваш проект.Пример сброса: https://meyerweb.com/eric/tools/css/reset/

0 голосов
/ 14 апреля 2019

Если вы хотите, чтобы родительский div имел определенный размер, вы должны принудительно установить измерение для div и наследовать его свойства для его потомков ... 

div{
  height: 50vh;
  width: 50vw;
  background: red;
}

div>img{
  height: 100%;
  width: 100%;
}

<div>
    <img src="image.jpg" alt="text">
</div>
0 голосов
/ 14 апреля 2019

Пожалуйста, проверьте это.Я думаю, что это поможет вам. codepen 

    div{background-color:red;width:200px;overflow:hidden;}
    div img{height:auto; max-width:100%;display:block;}

    <div>
        <img src="image" alt="text">
    </div>
0 голосов
/ 14 апреля 2019

Попробуйте использовать max-width: 100% на изображении.Это сохранит его размер ограниченным родительским размером.

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

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

...