Question

我在允许用户上传自己图像的网站上使用bootstrap3。这些图像稍后显示在给定页面中。问题是，一些用户上传的照片相对于持有它们的div更大或更小。我希望使用CSS（或者甚至是JavaScript，如果需要）调整所有这些图像的大小，以便它们适合div，同时保持其纵横比。与此同时，我希望他们能够做出回应。

Answer 1

使用图片上的img-responsive课程。

来自Bootstrap documentation：＆＃34;通过添加.img-responsive类，可以使Bootstrap 3中的图像响应友好。这会将max-width: 100%;和height: auto;应用于图像，以便它可以很好地扩展到父元素。＆＃34;

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);

}

CSS调整图像大小以适应div并具有响应性

2 个答案: