調整瀏覽器大小時，如何將img標簽置入div標簽中？

Question

我是Web開發的新手，但我很喜歡它，但是遇到了一個問題，無法解決。

當我調整瀏覽器大小時，我真的希望我的div元素中的圖像像： http : //jsfiddle.net/eb51hxj1/ 。

 <div class="divImage">
    <img id="image"> </div>
 <div>

我的代碼是：

https://jsfiddle.net/a2bsarfb/

Answer 1

Flexbox是您的朋友！

.divImage {
  display: flex;
  justify-content: center;
  align-items: center;
}

align-items使div內容沿橫軸居中（在這種情況下，垂直），justify-content使div內容沿主軸居中（水平）。

如果需要，請刪除其中一個。

Answer 2

您可以將.divImage的最大寬度設置為100％：

.divImage {
    max-width: 100%;
}

請注意尺寸調整，因為高度會發生變化，以保持大小比例不變。 如果您明確設置高度，則不會發生大小調整，但是在調整大小時，該比例可能看起來很奇怪。

Answer 3

由於塊元素總是嘗試占用其父元素的整個寬度，因此可以利用它來發揮自己的優勢。

#image {
    display: block;
    margin: 0 auto;
}

您鏈接的小提琴也是這樣。

Answer 4

您應該使用var
更少的代碼，更多的東西

var divImage = document.getElementById('divImage');
....
divImage.style.backgroundImage = "url("+nextImage+")";
...
divImage.style.opacity = opacity;

刪除img標簽並放入

<div class="divImage" id="divImage"><div>

和CSS
background-repeat: no-repeat

.divImage {
    max-width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*background-image: url(...)*/
}