Question

我是网络开发的新手，我喜欢它，但我遇到了一个问题，我无法理解。

当我调整浏览器大小时，我真的希望我的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(...)*/
}

当我调整浏览器大小时，如何将img标签居中到div标签？

4 个答案: