CSS resize images to fit in div и reponsive

Question

Я использую bootstrap3 на сайте, который позволяет пользователям загружать собственные изображения. Эти изображения позже отображаются на данной странице. Проблема заключается в том, что некоторые пользователи загружают фотографии, которые больше или меньше по отношению к div, которые их удерживают. Я хочу изменить все эти изображения с помощью CSS (или даже JavaScript, если это необходимо), чтобы они могли вписаться в div, сохраняя при этом их соотношение сторон. В то же время я хочу, чтобы они были отзывчивыми.

Answer 1

Используйте класс img-responsive на картинке.

Из Bootstrap documentation: «Изображения в Bootstrap 3 может быть переделаны удобно с помощью добавления .img-responsive класса Это относится max-width: 100%; и height: auto; к изображению, так что весы хорошо к родительскому элементу..»

Answer 2

Попробуйте это: https://jsfiddle.net/murkle/10jd0khz/1/

function openImageInLightBox(imageBase64) { 

div = document.createElement("div"); 
div.id = "myLightboxDiv"; 
div.style.width = "80%"; 
div.style.height = "80%"; 
div.style.position = "fixed"; 
div.style.top = "10%"; 
div.style.left= "10%"; 
div.style.border = "7px solid rgba(0, 0, 0, 0.5)"; 
div.style.background = "#000"; 
div.style["background-image"] = "url('" + imageBase64 + "')"; 
div.style["background-size"] = "contain"; 
div.style["background-repeat"] = "no-repeat"; 
div.style["background-position"] = "center"; 
div.onclick = function() {document.body.removeChild(div);}; 

document.body.appendChild(div); 

// now add transparent image over it 
// so that "Save image as..." works 
// remove this if you don't need it 
var elem = document.createElement("img"); 
elem.src = imageBase64; 
elem.style.height = "100%"; 
elem.style.width = "100%"; 
elem.style.opacity = 0; 
div.appendChild(elem); 

}