如何將圖像源置於圖像標籤內？

我目前正在研究一個基於colorbox的圖庫，但我遇到了一個問題。
我有一個圖像標籤，其源代碼根據圖像標籤的高度進行了調整（因爲否則背景將顯示，我不想）。如何將圖像源置於圖像標籤內？

所以，非常基本上是我擁有的是這樣的：

HTML

<img src="largephoto.png"/>

CSS

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

一個的jsfiddle顯示我的整個代碼：http://jsfiddle.net/puqd2bn5/7/

但現在形象不是中心的d，這讓我非常困擾。

如何將圖像源放在圖像標記中，而不將源代碼更改爲背景？（因爲這將意味着我不得不改變每一個庫項目的CSS，這是我不希望）

編輯：

所以，目前我有這樣的：

enter image description here

但是我想要圖像標籤中的圖像。所以它的圖像標籤中心的小冊子。

來源

2015-01-10 Lisa

可以設置圖片絕對和它的位置http://jsfiddle.net/puqd2bn5/9/ –

@VitorinoFernandes是的，非常棒！你可以把它作爲答案發布，以便我可以接受它嗎？你改變了什麼？ – Lisa

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

水平設置圖像絕對位置和它的演示 - http://jsfiddle.net/puqd2bn5/9/

來源

2015-01-10 15:02:03

感謝您接受如此之快:) –

沒問題;）。它幫了我很多！ – Lisa

-1

image父div有寬度。和圖像有一個完整的寬度。

變化.view類

來自：

.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*/ 
    }

來源

2015-01-10 14:49:38 khodadadi

這就是將圖像標籤置於PARENT中，我想將圖像源置於圖像標籤內。 – Lisa

嗯，我想這是這是你想要:)

變化.view IMG 到：

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

來源

2015-01-10 14:58:18

如何將圖像源置於圖像標籤內？

回答

相關問題