Javascript CSS调整图像大小以适应div和responsive

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

在图像上使用img响应类

通过添加.img responsive类，Bootstrap 3中的：图像可以变得响应友好。这适用于最大宽度：100%；高度：自动；以使图像能够很好地缩放到父元素。

尝试以下操作：

---

div-img{max-height:100%；max-width:100%；}仅当您在后台使用img时，才能放入父级div{background-size:cover；}中。div如何保存图像？通过css还是通过图像标签？@PeterRader通过图像标签…响应性设计永远不应该由JavaScript完成，使用css进行响应性设计！因此，a标签是不可能的。向我们展示HTML，给出一个清晰的示例，以及您希望限制的大小。

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

}