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

Мне нужно, чтобы сделать этот участок изображения до максимально возможного размера без перелива это <div> или искажения изображения.

Я не могу предсказать пропорции изображения, так что нет никакого способа, чтобы знать, следует ли использовать:
<img src="url" style="Ширина: 100%;">
против
<img src="url" style="высота: 100%;">

Я не могу использовать оба (т. е. стиль=”Ширина: 100%; высота: 100%;”), потому что будет растянуть изображение, чтобы соответствовать <div>.

В <div> имеет размер установлен в процентах от экрана, который тоже непредсказуем.

Если вы можете, использовать фоновые изображения и установить background-size: cover. Это позволит сделать фон покрывают весь элемент.

В CSS

div {   background-image: url(path/to/your/image.png);   background-repeat: no-repeat;   background-position: 50% 50%;   background-size: cover; } 

Если вы застряли с помощью встроенных изображений есть несколько вариантов. Во-первых, есть

объект-подходит

Это свойство действует на изображения, видео и другие объекты, подобные background-size: cover.

В CSS

img {   object-fit: cover; } 

К сожалению, браузер поддерживает не так уж велика с IE до версии 11 не поддерживает его вообще. Следующий вариант с использованием jQuery

На CSS + jQuery и

В HTML

<div>   <img src="image.png" class="image-fit"> </div> 

В CSS

div {   height: 8em;   width: 15em; } 

Пользовательские jQuery плагин

(function ($) {   $.fn.imageFit = function(contain) {     this.each(function() {       var $this = $(this),         src = $this.get(0).src,         $wrapper = $this.parent();        if (contain) {         $wrapper.css({           'background': 'url(' + src + ') 50% 50%/contain no-repeat'         });       } else {         $wrapper.css({           'background': 'url(' + src + ') 50% 50%/cover no-repeat'         });       }        $this.remove();     });      return this;   }; })(jQuery); 

Использовать плагин такой

jQuery('.image-fit').imageFit(); 

Он примет изображение, установить его в качестве фонового изображения на обертке элемент изображения и удалить img бирка из документа. Наконец, Вы могли бы использовать

Чистый CSS

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

В CSS

div {   height: 8em;   width: 15em;   overflow: hidden; }  div img {   min-height: 100%;   min-width: 100%;   width: auto;   height: auto;   max-width: none;   max-height: none;   display: block;   position: relative;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); } 

Надеюсь, что это может помочь кому-то, удачи в кодировании!

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*