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

ProgramBox

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

Post author:admin
Запись опубликована:27 августа, 2022
Post category:Вопросы по программированию

#html #css #image

#HTML #css #изображение

Вопрос:

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

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

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

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

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

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

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

Мой код

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

1. пожалуйста, предоставьте больше кода. я думаю, что в css добавьте это переполнение: скрытое и img- width: 100%.

2. Пожалуйста, предоставьте css и html-код

3. я бы хотел, но система не хочет это показывать

4. Я уже редактирую это. Вы можете одобрить. Сначала вам нужно знать, как задать запрос в stackoverflow, а также добавить идентификатор языка для выделения кода.

5. я видел ваше редактирование и одобрил его. Большое вам спасибо!

Ответ №1:

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

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

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

 <div>
    <img src="image.jpg" alt="text">
</div>

1. Ширина — это просто ширина экрана, которая является шириной по умолчанию. Но я применил то, что вы предложили, к высоте. Присвоил div высоту 2vw, а img — высоту 100%. Но когда я сужаю экран, изображение по-прежнему падает и опускается даже снаружи и ниже div

2. Затем просто установите overflow:hidden на div ( ссылка ).

Ответ №2:

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

Я надеюсь, что это поможет.

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

1. В сочетании с ответом BJRINT выше я решил проблему. Большое вам обоим спасибо. Кстати, я не использую никаких фреймворков.

2. На самом деле вашего решения было достаточно, чтобы решить его без решения, предложенного BJRIN. Теперь я все еще пытаюсь понять, почему необходимо добавить display:block, чтобы сохранить img внутри контейнера div.

3. Использование reset.css обеспечивает унифицированное поведение во всех браузерах. Теги изображений, которые когда-то использовались в середине абзацев на старых HTML-страницах. Если вы попытаетесь поместить тег изображения в середину текста со ìnline свойством по умолчанию, это не нарушит поток текста. Свойство block фактически добавляет новые строки в начало и конец вложенного элемента и превращает их в «блоки», что означает, что по умолчанию они имеют родительский размер (размер окна, если они находятся в корне документа). Вы можете получить более подробную информацию о свойстве отображения в MDN

4. Я действительно рад, что это работает!! Обычно я добавляю <figure> перед тегом <img>, потому что с помощью файла reset.css он автоматически добавит display:block на рисунке.

5. Еще раз спасибо за всю информацию Альба Сильвенте Фуэнтес. Я использовал reset css и действительно должен рассмотреть возможность его повторного использования. Скорее всего, потому что я сторонний специалист. Честно говоря, от CSS у меня мурашки по коже.

Ответ №3:

Пожалуйста, проверьте это. Я думаю, это вам поможет. 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>

Ответ №4:

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

1. Спасибо, но у меня нет проблем с шириной — ширина работает нормально и именно то, что я ожидаю от нее

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

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