Сделайте снимок полной высоты/ширины div при сохранении пропорции

Question

Я делаю простой лайтбоксы для галереи изображений. Проблема заключается в том, что изображение не принимает полную высоту/ширину деления #wrapper.

Я пробовал использовать max-width и max-height Свойства css, но изображение не принимает полную ширину/высоту. На маленьком экране изображение занимает соответственно всю высоту/ширину, но при большой ширине экрана он не принимает полную ширину/высоту.

Также попробовал width:100%; height:auto;, но если высота изображения большая, она просто перекрывает #wrapper div.

Демо на codepen.io.

HTML:

<div id="snap-modal"> 
    <div id="wrapper"> 
     <img src="http://placehold.it/450x450"> 
    </div> 
</div> 

CSS:

#snap-modal { 
    width: 90%; 
    height: 90%; 
    outline: 1px solid lightgrey; 
    top: 0; 
    left: 0; 
    position: fixed; 
} 

#snap-modal #wrapper { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

#snap-modal #wrapper img { 
    max-width: 100%; 
    max-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    margin: auto; 
} 

Как сделать изображение принять полную высоту/ширину в зависимости от размера изображения внутри DIV (в CSS, если это возможно), сохраняя при этом соотношение сторон? Спасибо.

Answer 1

Да можно попробовать object-fit: cover; Собственость вместе с высотой или шириной

#snap-modal #wrapper { 
    width: 100%; 
    object-fit: cover; 
} 

проверки для получения более подробной информации https://css-tricks.com/almanac/properties/o/object-fit/

Answer 2

я есть обновить фрагмент кода с большим изображением, но результат тот же sizr изображение теперь 1920х1200

#snap-modal #wrapper img { 
    max-width: 100%;// remove this line with widht:100% 
    max-height: 100%;// remove this line with height:100% 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    margin: auto; 
} 

Отрывок

#snap-modal { 
 
    width: 90%; 
 
    height: 90%; 
 
    outline: 1px solid lightgrey; 
 
    top: 0; 
 
    left: 0; 
 
    position: fixed; 
 
} 
 

 
#snap-modal #wrapper { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 

 
#snap-modal #wrapper img { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}

<div id="snap-modal"> 
 
    <div id="wrapper"> 
 
    <img src="http://www.planwallpaper.com/static/images/434976-happy-valentines-day-timeline-cover.jpg"> 
 
    </div> 
 
</div>

Answer 3

Вы устанавливаете .max-width свойство 100%, которое не является полезным в этом случае, так как вы хотите, чтобы заставить ширину изображения будет равна емкости (#wrapper), вы должны использовать свойство min-width: 100%, это заставит изображение взять полную ширину контейнера. Таким образом, CSS теперь становится:

#snap-modal #wrapper img { 
    min-width: 100%; // This is updated style 
    min-height: 100%; //Similarly for height 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    margin: auto; 
} 

См обновленный codepen

Answer 4

ли это помогает:

#snap-modal { 
    width: 90%; 
    height: 90%; 
    outline: 1px solid lightgrey; 
} 

#snap-modal #wrapper { 
    width: 100%; 
    height: 100%; 
} 

#snap-modal #wrapper img { 
    margin:auto; 
    height:100%; 
    width:100%; 
} 

Answer 5

Эй перейдите по ссылке был очень полезным для меня maintain-image-aspect-ratios-responsive-web-design

Answer 6

Я Жду» t найти хороший ответ, поэтому я использую js для этого.

var image; 
var container = snap_modal.find('#wrapper'); 
var snap_image = container.find('img'); 

function change_image() { 
    snap_image.attr('src', image.attr('src')); 
    image_title.text(image.attr('alt')); 
} 

function resize_snap() { 
    change_image(); 
    snap_image.css({ 
     'height': container.height(), 
     'width': 'auto' 
    }) 
    if (snap_image.width() > container.width()) { 
     snap_image.css({ 
      'width': container.width(), 
      'height': 'auto' 
     }) 
    } 
} 

$(function() { 
    $('#snap-list .snap img').on('click', function() { 
     image = $(this); 
     resize_snap(); 
    }); 
    $(window).resize(function() { 
     resize_snap(); 
    }); 
}) 

Это не самая лучшая работа, но надеюсь, что это поможет кому-то вроде меня.