图像大于视口时不居中

Question

当视口大于图像宽度时，图像居中，但当图像宽度大于视口宽度时，图像向左对齐而不是向中心对齐。我的目标是使图像始终裁剪到视口的宽度，并始终与中心对齐。

body,
html {
  margin: 0;
  padding: 0;
}
.crop {
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: red;
}
#cropped-img {
  position: relative;
  height: 100%;
  display: block;
  margin: auto;
}

<div class="crop">
  <img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>

Answer 1

您可以使用flexbox实现您想要的：

body,
html {
  margin: 0;
  padding: 0;
}
.crop {
  overflow: hidden;
  background-color: red;
  display:flex;
  justify-content:center;
}

<div class="crop">
  <img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" >
</div>

Answer 2

没

关系，我设法使用背景图像属性获得了我需要的确切效果。如果其他人感兴趣，这是我使用的HTML和CSS：

.HTML：

<div class="crop"></div>

.CSS：

body, html {
    margin:0;
    padding:0;
}
.crop {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-image: url("http://img1.jurko.net/wall/paper/donald_duck_4.jpg");
    background-repeat: no-repeat;
    background-position: center; 
}

Answer 3

尝试为变量值提供占据元素宽度 100%

的图像

body,
html {
  margin: 0;
  padding: 0;
}
.crop {
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: red;
  text-align: center;
}
#cropped-img {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

<div class="crop">
  <img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>