将图像居中拟合

Question

我目前卡住了，因为我试图在页面中居中放置图像。这是我所拥有的

HTML

<div class="bg-container">
    <img alt="Background" class="random bgimg">
</div>

CSS

.bgimg{
max-height: 640px;
width: 1920px;
clip: auto;
}

.bg-container{
  overflow-x: hidden;
}

注意：img 标签中没有 src 属性，因为我使用 random 类通过 JavaScript 拉取随机图像。

我尝试将 center-block 和 text-center 应用于 div 和 image 类，但无济于事。这是实际页面的示例。 http://shepherdjerred.com/demo/front/

感谢您提供的任何帮助。

Answer 1

1. 您不要在图像元素的宽度属性中添加 px 单位。

2. 要使图像居中，请将其添加到您的选择器

   .bgimg {
     display: block;
     margin: auto;
   }