如何在图像标签中将图像源居中？

Question

我目前正在处理一个 colorbox-based 画廊，但我运行遇到了一个问题。
我有一个图像标签，其来源根据图像标签的高度调整大小（否则会显示背景，这是我不想要的）。

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

HTML

<img src="largephoto.png"/>

CSS

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

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

但是现在图像不居中，这让我很困扰。

如何在不将源更改为背景的情况下将图像源居中放置在图像标记中？（因为那意味着我必须为每个 gallery-item 更改 css，这是我不想要的）

编辑：

所以，目前我有这个：

但我希望图像在图像标记内居中。所以小册子在它的图像标签的中心。

Answer 1

图片父级 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*/
    }

Answer 2

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

更改.view img 至：

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

Answer 3

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

来设置图像绝对和水平定位

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

如何在图像标签中将图像源居中？

How to center the image source within an image tag?

html

css

responsive-design