Question

我目前正在使用基于彩盒的图库，但我遇到了一个问题。
我有一个图像标签，其中的源根据图像标签的高度进行了调整（因为否则会显示背景，我不想要）。

所以，非常基本上我拥有的是：

HTML

<img src="largephoto.png"/>

CSS

img {
  min-height:100%;
  height:100%;
  min-width:100%;
}

一个JSfiddle来显示我的整个代码：http://jsfiddle.net/puqd2bn5/7/

但现在图像并不居中，这让我很烦恼。

如何在不将光源更改为背景的情况下将图像源置于图像标签中心？（因为这意味着我必须为每个画廊项目更改css，我不想要）

编辑：

所以，目前我有这个：

enter image description here

但我希望图像以图像标记为中心。因此，小册子位于其中心的图像标记。

Answer 1

您可以添加left:50%和translatex(-50%)

，将图像设置为绝对并水平放置

演示 - http://jsfiddle.net/puqd2bn5/9/

Answer 2

嗯，我想这就是你想要的:)

更改.view img 到：

 .view img {
   display: block;
   position: relative;
   min-height:100%;
   height:100%;
   min-width:100%;
   margin:0 -100%;
 }

Answer 3

图片父div有宽度。和图像有一个全宽。

更改.view class

来自：

    .view {
        background: url("../img/background/patterns/bgimg.jpg") no-repeat scroll center center / cover #fff;
        cursor: default;
        float: left;
        height: 300px;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 19%;
    }

为：

    .view {
        background: url("../img/background/patterns/bgimg.jpg") no-repeat scroll center center / cover #fff;
        cursor: default;
        float: none;/*change float left to none*/
        height: 300px;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 19%;
        margin:0 auto; /*add margin for show in center of body*/
    }

如何将图像源置于图像标签中心？

3 个答案: