Question

我正在建立一个网站，我希望将具有不同高度和宽度的图像放在页面的中心。有一个脚本，所以我们一次只能看到一张图像。

我曾考虑过创建一个可以占据整个页面的div，但是后来我找不到一种方法来强制图像居中放置。

有什么建议吗？这就是我现在得到的：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

body {
  background-color: black;
}

div>div {
  background-color: blue;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.imagetest1 {
  height: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>La chasse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
  <div class="w3-content w3-display-container">
    <div class="mySlides"><img class="imagetest1" src="img_lights.jpg"></div>
    <div class="mySlides"><img class="imagetest1" src="img_lights.jpg"></div>

    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</body>

</html>

感谢您的帮助！ Mateo

Answer 1

通常将图像居中是这样的：

img{
   display:block;
   margin:auto auto;
}

您需要确保先调整父元素的大小。

Answer 2

此外，通过使用Bootstrap 4.1（我强烈建议您学习），您可以执行以下操作：

<img class="mx-auto">

链接到引导程序：https://getbootstrap.com/

如果您不想使用引导程序，则所使用的w3 css也具有对齐对象的属性，您可以阅读有关here的信息。

Answer 3

将您的外部div更改为此：

<div class="w3-content w3-display-container w3-display-middle>

然后在您的CSS中添加以下内容：

div.w3-content { height: 100%; width: 100%; }

还将object-fit: contain;添加到.imagetest1

将不同类型的img设置为特定高度

3 个答案: