調整大小時保持圖像居中

我想在調整瀏覽器大小時保持圖像居中。調整大小時保持圖像居中

我用下面的代碼，但每次我調整瀏覽器，我的形象不守中心（X/Y）。它也應該與IE9一起工作。任何幫助，將不勝感激！

.container { 
    height: 580px; 
    width:700px; 
    margin: 0 auto; 
    z-index: 1; 
    overflow: hidden; 
    position: relative; 
    border:1px solid black; 
} 
.container img { 
    position: absolute; 
    left: -100%; 
    right: -100%; 
    top: -100%; 
    bottom: -100%; 
    margin: auto; 
    height: 580px; 
}

來源

2015-06-16 Hectooorr

像這樣https://jsfiddle.net/j08691/vx6v1b2d/1/embedded/result/？ – j08691

實施例以垂直和水平方向中心元素。

.container { 
 
    display: block; 
 
    width: 256px; 
 
    height: 256px; 
 
    overflow: hidden; 
 
    background: #555; 
 
    position: relative; 
 
} 
 

 
.container .center { 
 
    display: block; 
 
    padding: 40px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -o-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    background: #999; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="center"> 
 
    Lorem ipsum dolor 
 
    </div> 
 
</div>

來源

2015-06-16 17:47:27

謝謝你的幫助，因爲這很好。 – Hectooorr

當然可以。很高興可以幫忙;） –

你可以通過定位集裝箱50％top和left，然後設置一個負top/left保證金容器的一半大小做到這一點。你將不得不移動overflow:hidden到圖像容器，像這樣：

.container { 
    height: 580px; 
    width:700px; 
    margin: 0 auto; 
    z-index: 1; 
    border:1px solid black; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top:-290px; 
    margin-left:-350px; 
} 
.image { 
    overflow: hidden; 
} 
.content{ 
    text-align:center; 
}

我也感動文本DIV入容器中，以便將它居中爲好。

Updated Fiddle

來源

2015-06-16 17:18:16 APAD1

調整大小時保持圖像居中

回答

相關問題