Css высота картинки: Задавать Height и Width для изображений снова важно / Хабр

Leave a Comment / Css / By /

css — Как сделать картинки в одинаковой высоты и ширины блоки

Как это сделать? Разные размеры картинок?а блоки одинаковые и получается у меня разная высота, а должна быть одинаковая, и чтобы картинки подстраивались???

И без flexbox.

Поместить их в фон и задать background-size: cover:

div {
  height: 10em;
  width: 10em;
  float: left;
  background-size: cover;
}
<div style=background-image:url(//gyazo.com/245b89755c8acd4463003dea4d61715b.png)></div>
<div style=background-image:url(//gyazo.com/5fd8cfef168b5fb3aa72b1a9f97943d6.png)></div>

2

Полагаю, это должно решить проблему

Блокам:

max-width: 150px;
max-height: 150px;
overflow: hidden;

Вместо 150px укажите свои размеры блоков

Картинкам:

width: 100%;
height: 100%

Надеюсь вы это имели введу вам нужно к классу картинки добавить width:100%; height:100%;

div
{
width: 150px;
height: 150px;
float:left;
background: #000;
}
div img
{
width:100%;
height:100%;
}
<div><img src="https://lh4. googleusercontent.com/a-/AAuE7mCFZa1FwKlslDgth0hTsv3Km-rZ7yx2W7gdDkOG=s96" /></div>
<div><img src="https://lh4.googleusercontent.com/a-/AAuE7mCFZa1FwKlslDgth0hTsv3Km-rZ7yx2W7gdDkOG=s96" /></div>
<div><img src="https://lh4.googleusercontent.com/a-/AAuE7mCFZa1FwKlslDgth0hTsv3Km-rZ7yx2W7gdDkOG=s96" /></div>

Видимо так…

<style>
.bubu {width: 180px; height: 180px; margin: 5px; border: 3px solid orange;}
</style>

<img src="https://gyazo.com/245b89755c8acd4463003dea4d61715b.png">
<img src="https://gyazo.com/5fd8cfef168b5fb3aa72b1a9f97943d6.png">

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

<style>
.bubu {width: 180px; height: 180px; display: inline-block; margin: 5px; border: 3px solid orange;}
.bubu img {width: 100%; height: 100%;}
</style>

<div><img src="https://gyazo. com/245b89755c8acd4463003dea4d61715b.png"></div>
<div><img src="https://gyazo.com/5fd8cfef168b5fb3aa72b1a9f97943d6.png"></div>

Вопрос, зачем добавлять лишний код, если на выходе должно получиться то же самое) У тегов img (и всех остальных одиночных) есть минус — у них нет псевдоэлементов :before и :after

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Высота блока по высоте изображения

Задать вопрос

Вопрос задан

6 лет 8 месяцев назад

Изменён 6 лет 8 месяцев назад

Просмотрен 1k раз

В блоке есть картинка и текст. Текст должен обтекать картинку. Если текста немного, то высота внешнего блока должна равняться высоте изображения.

Как сделать на чистом CSS, чтобы высота внешнего блока равнялась высоте изображения?

Подгон высоты Javascript’ом работает только с таймером. Около, 50 мс (время загрузки изображения).

Стили:

.wrap {
    background-color: #f76;
    height: auto;
}
.image-container {
    width: 20%;
    float: left;
}
.image-container img {
    width: 100%;
    border: 1px solid black;
}

Работает, если внешнему блоку задать

display: inline-block Правда, есть одно «но» — для него перестают работать float: none и clear: both, т.е. перенос строки в HTML приходится делать вручную

Попробуй так:

<style>
.leftimg {
  float:left; /* Выравнивание по левому краю */
  margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
}
.rightimg  {
  float: right; /* Выравнивание по правому краю  */ 
  margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
}
</style>

3 

. wrap:after {
  display: block;
  content: '.';
  height: 0;
  overflow: hidden;
  clear: both;
}

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Свойство CSS max-height

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите максимальную высоту элемента

в 50 пикселей:

p. ex1 {
  максимальная высота: 50 пикселей;
}

Попробуйте сами »

Определение и использование

Свойство max-height определяет максимальную высоту элемента.

Если содержимое превышает максимальную высоту, оно будет переполнено. Как контейнер будет обрабатывать переполняющее содержимое, определяемое параметром свойство переполнения.

Если содержимое меньше максимальной высоты, свойство max-height не имеет никакого эффекта.

Примечание: Это предотвращает значение свойство height становится больше, чем максимальная высота . Стоимость переопределение свойства max-height свойство высоты.

Значение по умолчанию: нет
Унаследовано: нет
Анимация: да, см. отдельные свойства . Читать про анимированный Попытайся
Версия: CSS2
Синтаксис JavaScript: объект . style.maxHeight=»100px» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Недвижимость
максимальная высота 1,0 7,0 1,0 2.0.2 7,0

Синтаксис CSS

max-height: none| длина |начальный|наследовать;

Значения свойств

Значение Описание Демо
нет Нет максимальной высоты. Это по умолчанию Играй »
длина Определяет максимальную высоту в пикселях, см и т. д. Подробнее о единицах длины Играй »
% Определяет максимальную высоту в процентах от содержащего блока
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Высота и ширина CSS

Ссылка CSS: свойство min-height

Ссылка HTML DOM: свойство maxHeight

❮ Назад Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

html — Как использовать CSS для установки высоты изображения такой же, как ширина

спросил

Изменено 5 лет, 2 месяца назад

Просмотрено 14 тысяч раз

В моем проекте есть несколько изображений. Мой код выглядит так:

Ширина img составляет 100% от div , что составляет 50% всего экрана. Если я изменяю размер браузера, ширина изображения изменяется. В этом случае, как сохранить высоту такой же, как ширина?

  • HTML
  • CSS
  • image
  • responsive-design
  • css-position

Зависит от соотношения сторон изображения.

  1. Если вы хотите растянуть изображение до квадрата: так как контейнер
    занимает 50% всего экрана. Вы могли бы написать это как width: 50vw; (50% ширины области просмотра) . То же самое для вашего изображения: ширина: 50vw; и сохранить высоту такой же, как ширина:
 .col-sm-6 изображение {
  ширина: 50vw;
  высота: 50vw;
}

  1. Если изображение квадратное, просто отрегулируйте ширину. Высота адаптируется автоматически. Поскольку вы должны использовать Bootstrap (догадываясь по имени класса col-sm-6) .

  2. Если изображение всегда панорамное:

 .контейнер {
  ширина: 50vw;
  высота: 50vw;
  граница: сплошная известь 1px;
  переполнение: скрыто;
}

.контейнер изображения {
  высота: 100%;
  минимальная ширина: 100%;
} 
 <дел>
  1. Та же логика выше для всегда вертикальных изображений.

0

Вы можете просто установить ширину обертки равной ширине и высоте для этого и 100% ширине и высоте для img .

Другая опция

Вы также можете использовать тот факт, что padding всегда рассчитывается на основе ширины в CSS-

  1. Позиционирование img абсолютно относительно его обертки

  2. Задайте такое же значение для padding-top и width (по 50vw каждый) и установите height равным нулю для обертки .

  3. Дайте ширину: 100% для изображение

См. демонстрацию ниже:

 body {
  маржа: 0;
}
.обертка {
  ширина: 50vw;
  высота:0;
  обивка-верх: 50vw;
  положение: родственник;
}
.wrapper изображение {
  ширина:100%;
  высота: 100%;
  верх:0;
  слева: 0;
  положение: абсолютное;
  вертикальное выравнивание: сверху;
} 
 <дел>

Обратите внимание, что ваши изображения могут растянуться, если это не квадратное изображение — вы можете выбрать в соответствии с вашим дизайном, чтобы отбросить либо ширина: 100% , либо высота: 100% , чтобы растяжения не произошло. (или, конечно, выберите квадратное изображение!)

См. демонстрацию ниже:

 body {
  маржа: 0;
}
.обертка {
  ширина: 50vw;
  высота:0;
  обивка-верх: 50vw;
  положение: родственник;
}
.wrapper изображение {
  ширина:100%;
  высота: 100%;
  верх:0;
  слева: 0;
  положение: абсолютное;
  вертикальное выравнивание: сверху;
} 
 <дел>