Background url css как вписать изображение полностью: background-image | htmlbook.ru

html — Пропорциональное вписывание изображения

Нужно вписать изображение в div фиксированного размера, но так, чтобы больший размер изображения занимал 100% div’а, а меньший — сколько получится. Если подгонять только один фиксированный размер, то это выглядит так

  div {
    width: 125px;
    height: 70px; 
  }
  div img {
    width: 100%;
    height: auto;
  }

Но если у изображения высота больше, чем ширина, то получается швах. Решается ли проблема на CSS?

• html
• css

Если я правильно понял вопрос, то вам нужно свойство background-size. Например:

div {
    background: url(/example/image/mybg.png) 100% 100% no-repeat;
    background-size: contain;
}

cover

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

contain

Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Источник: https://webref.ru/css/background-size

А если именно с тегом img нужно, то может такое решение устроит?

.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  display: inline-block;
  margin: 10px;
  position: relative;
}

div img {
  position: absolute;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}

<div><img src="http://lorempixel.com/100/70/" alt=""></div>
<div><img src="http://lorempixel.com/100/70/" alt=""></div>
<div><img src="http://lorempixel.com/70/100/" alt=""></div>
<div><img src="http://lorempixel.com/70/100/" alt=""></div>

Можно еще проще, с object-fit: contain. Тогда изображение автоматически центрируется. Замена на object-fit: cover растянет картинку на весь блок, тоже с автоматическим центрированием.

div img {
  width: 100%;
  height: 100%;
  object-fit:contain;
}

.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  display: inline-block;
  margin: 10px;
  position: relative;
}

div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

div.cover img {
  object-fit: cover;
}

<div><img src="http://lorempixel.com/300/140/" alt=""></div>
<div><img src="http://lorempixel.com/300/140/" alt=""></div>
<div><img src="http://lorempixel.com/140/300/" alt=""></div>
<div><img src="http://lorempixel.com/140/300/" alt=""></div>
<br>
<div><img src="http://lorempixel.  com/300/140/" alt=""></div>
<div><img src="http://lorempixel.com/300/140/" alt=""></div>
<div><img src="http://lorempixel.com/140/300/" alt=""></div>
<div><img src="http://lorempixel.com/140/300/" alt=""></div>

Вариант с ответом Romchik, но без абсолютного позиционирования (расположение за счёт flexbox):

.ex1 {
  width: 70px;
  height: 125px;
}

.ex2 {
  width: 125px;
  height: 70px;
}

div {
  border: 1px solid #ccc;
  margin: 10px;
  
  /* сделать inline flex-контейнером */
  display: inline-flex;
  /* центрировать элементы горизонтально */
  justify-content: center;
  /* центрировать элементы вертикально */
  align-items: center;
}

div img {
  max-height: 100%;
  max-width: 100%;
}

<div><img src="https://i. stack.imgur.com/8w5wV.jpg" alt=""></div>
<div><img src="https://i.stack.imgur.com/8w5wV.jpg" alt=""></div>
<div><img src="https://i.stack.imgur.com/bkg7V.jpg" alt=""></div>
<div><img src="https://i.stack.imgur.com/bkg7V.jpg" alt=""></div>

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

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

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

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

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Vuetify — платформа компонентов Vue

Вы просматриваете документацию для Vuetify 3

Компонент v-img оснащен функциями для поддержки мультимедиа. В сочетании с vuetify-loader вы можете добавлять динамические прогрессивные изображения, чтобы улучшить взаимодействие с пользователем.

#Usage

Компонент v-img используется для отображения адаптивного изображения с отложенной загрузкой и заполнителем.

#API

#Предупреждения

Свойство lazy-src не действует, если не задано либо высота , либо соотношение сторон . Это связано с тем, что для отображения временного изображения контейнеру изображения требуется ненулевая высота.

#Примеры

#Реквизит

#Cover

Если предоставленное соотношение сторон не соответствует реальному изображению, поведение по умолчанию — заполнить как можно больше места без обрезки. Чтобы заполнить все доступное пространство, используйте крышку опору.

#Height

v-img автоматически увеличится до размера своего src , сохраняя правильное соотношение сторон. Вы можете ограничить это с помощью пропсов height и max-height .

# Слоты

#Placeholder

v-img имеет специальный слот placeholder для отображения заполнителя во время загрузки изображения. Примечание: в приведенном ниже примере есть неправильный src, который не загружается, чтобы вы могли увидеть заполнитель.

#Error

v-img имеет слот error , который можно использовать для отображения альтернативного содержимого в случае возникновения ошибки при загрузке исходного изображения. Обычно этот слот используется для загрузки резервного изображения, если исходное изображение недоступно.

#Разное

#Будущие форматы изображений

 
  <шаблон #исходники>
    <источник srcset="image.webp">
  

 

Это будет вести себя аналогично:

 <картинка>
  <источник srcset="image.webp">
  

 

srcset и атрибуты media также можно использовать для художественного оформления или альтернативных размеров, см. MDN для получения дополнительной информации.

#Grid

Вы можете использовать v-img для создания, например, картинной галереи.

#Complex Grid Layout

Создайте более сложный макет галереи изображений, используя классы flex-box .

Готовы к большему?

Сетки

Компоненты

Соотношение сторон

Компоненты

Параллакс

Компоненты

· Nuxt Image

Узнайте, как использовать и настраивать компонент nuxt-img.

является заменой собственного тега .

• Использует встроенный провайдер для оптимизации локальных и удаленных изображений
• Преобразует src в URL-адреса, оптимизированные для провайдера
• Автоматически изменяет размеры изображений на основе ширины и высоты 8 Создает адаптивные размеры при предоставлении размеров вариант
• Поддерживает встроенную ленивую загрузку, а также другие атрибуты

nuxt-img выводит собственный тег img напрямую (без какой-либо оболочки вокруг него). Используйте его так же, как и тег :

Результат:

  png"
 
  плотности = "x1 x2"
  />
 

 <шаблон>