Biasanya, anda pusat gambar dengan display: block; margin: auto
, tapi jika gambar yang lebih besar dari wadah, itu meluap ke kanan. Bagaimana cara membuat overflow untuk kedua belah pihak sama-sama? Lebar container adalah tetap dan dikenal. Lebar gambar tidak diketahui.
Membutuhkan tambahan satu bungkus (diuji di FireFox, IE8, IE7):
Ada masalah dengan jawaban asli (bawah). Jika gambar lebih besar dari wadah yang luar
berpusat pada dengan itu's auto margin, maka itu memotong gambar di sebelah kiri dan menciptakan berlebihan ruang di sebelah kanan, [seperti biola ini menunjukkan][1].
Kita bisa mengatasi itu dengan mengambang batin
yang tepat dan kemudian berpusat dari kanan. Ini masih memotong img
dari halaman ke kiri, tapi ia melakukannya dengan secara eksplisit mendorong itu dan kemudian pusat kembali off dari itu, kombinasi yang adalah apa yang mencegah tambahan gulir horizontal di sebelah kanan. Sekarang kita hanya mendapatkan sebanyak gulir kanan seperti yang kita butuhkan dalam rangka untuk melihat bagian kanan gambar.
[Biola Contoh][2] (Perbatasan di biola untuk demo saja.)
Penting CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
position:relative;
float: right; /* this was added and display removed */
right: 50%;
}
div.inner img {
position: relative;
right:-50%; /* this was changed from "left" in original */
}
Jika anda inginkan tidak ada gulir kanan untuk lebar gambar
Kemudian menggunakan di atas, juga mengatur elemen apa pun membungkus luar
([seperti tubuh
][3] atau [ketiga wrapper][4]) untuk memiliki overflow: hidden
.
[Biola Contoh][5] (Perbatasan di biola untuk demo saja.)
HTML
<div class="outer">
<div class="inner">
<img src="/yourimage.png">
</div>
</div>
CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
display: inline-block;
position:relative;
right: -50%;
}
div.inner img {
position: relative;
left:-50%;
}
HTML
<div class="image-container">
<img src="http://www.google.com/images/logo.gif" height="100" />
</div>
CSS
.image-container {
width: 150px;
border: solid 1px red;
margin:100px;
}
.image-container img {
border: solid 1px green;
}
jQuery
$(".image-container>img").each(function(i, img) {
$(img).css({
position: "relative",
left: ($(img).parent().width() - $(img).width()) / 2
});
});
Melihat itu di jsFiddle:
Alternatif CSS murni solusinya adalah dengan menggunakan mengubah
atribut:
HTML:
<div class="outer">
<img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
CSS:
.outer {
position: relative;
width: 100px;
border: 1px solid black;
height: 150px;
margin-left: 100px; /* for demo */
/* overflow: hidden; */
}
img.image {
width: 200px;
opacity: 0.7;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
[Biola](
)Hanya untuk menambahkan overflow:hidden
orang tua div
untuk menyembunyikan ekstra area gambar.
Bahkan ada yang lebih sederhana pure css/html cara (tanpa besar gulir horizontal) :
Html :
<div class="outer">
<img src="/my/sample/image.jpg">
</div>
Css :
Jika anda don't ingin melihat gambar meluap
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: hidden;
position: relative;
height: 200px;
}
Dengan gambar meluap terlihat
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: visible;
position: relative;
height: 200px;
}
body, html {
overflow-x:hidden;
}
A latar belakang solusi dengan gambar meluap terlihat :
Html :
<div class="outer">
<div class="inner"></div>
</div>
Css :
div.outer {
width: 100%;
height: 200px;
}
div.inner {
background: url('/assets/layout/bg.jpg') center no-repeat;
position: absolute;
left: 0;
width: 100%;
height: inherit;
}
dengan asumsi luar lebih lebar wadah tertentu.
Aku hanya bisa berpikir dari Javascript solusi karena apa yang perlu anda lakukan adalah relatif posisi citra negatif jumlah ke kiri dari wadah:
jQuery
$(document).ready(function(){
var theImg = $('#container img');
var theContainer = $('#container');
if(theImg.width() > theContainer.width()){
theImg.css({
position: 'relative',
left: (theContainer.width() - theImg.width()) / 2
})
}
})
Saya menemukan hal ini menjadi solusi yang lebih elegan, tanpa flex, mirip dengan sesuatu di atas, tetapi lebih umum (berlaku di kedua vertikal dan horisontal):
.wrapper {
overflow: hidden;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */ /* optional */
}
Saya don't pikir ada CSS murni larutan (Kecuali untuk menjawab :)). Namun dengan Javascript itu akan hanya masalah menemukan lebar gambar, mengurangkan wadah lebar, membagi dua dan anda memiliki cara yang jauh ke kiri dari wadah yang anda butuhkan.