Question

所以，我在div中有一张带有图像的幻灯片，当我调整它的大小时，它们会锚定图像的左上角。有没有办法让它从图像中心调整大小而不用它作为背景？

.fulls{
  width:100%; 
  height:100%;
  min-height: 1200px;
  min-width: 1900px;
}

这是我用于图像的格式。

这是主页link

上的网络示例

由于

Answer 1

我猜是这样的：

HTML

<div class="slideshow">
    <img class="slide" src="..." />
    <img class="slide" src="..." />
</div>

CSS

.slideshow {
    width: 100%; // or amount of pixels, what you choose
    height: 100%; // gets height of parent div, or choose amount of pixels
}

.slide {
    width: 100%;
}

注意奇怪的图像比例。在使子元素100％宽度和高度时，它继承父元素的属性。这使它涵盖了整个幻灯片。这是你想要的吗？

这是一个jsfiddle： https://jsfiddle.net/Ber_4B/r1t53uub/

Answer 2

您需要将图像置于其容器中心。

向图像添加left / top和transform属性将使图像居中。

.fulls {
    height: 100%;
    left: 50%;
    top: 50%;
    min-height: 1200px;
    min-width: 1900px;
    position: relative;
    transform: translate(-50%, -50%); // ADD VENDOR PREFIXES TO THIS PROPERTY
    width: 100%;
}

Answer 3

我会选择这种方式

HTML

<div class="slideshow">
   <div class="slide" style="background-image:url('.../..');></div>
   <div class="slide" style="background-image:url('.../..');></div>
</div>

CSS

.slideshow {...}
.slide {
    height:100%;
    width:100%;
    background-position:center;
    background-size:cover;
}

居中调整图像css

3 个答案: