Ho un'immagine di 400px e una div che è più piccola (la larghezza non è sempre 300px come nel mio esempio). Voglio centrare l'immagine nel div, e se c'è un overflow, nascondilo.center image in div con overflow nascosto
Nota: Devo mantenere la posizione: assoluta sul problema. Sto lavorando con le transizioni css, e se uso la posizione: relativa, la mia immagine scuote un po '(http://bit.ly/MaYbMB).
jsfiddle http://jsfiddle.net/wjw83/1/
Si dovrebbe rendere il contenitore relativo e dargli un'altezza pure e il gioco è fatto.
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />Se si vuole si può anche centrare l'immagine in senso verticale con l'aggiunta di un margine negativo e la posizione superiore: http://jsfiddle.net/jaap/wjw83/5/
la devono corp tua immagine da lati di nasconderlo provare questo
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
uno dei demo per il primo modo sul sito di cui sopra
farò qualche lettura su di esso anche
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
assicurati solo di come stai usando l'immagine attraverso lo sfondo css usa la posizione dell'immagine di backgroud come sfondo: url (il tuo percorso d'immagine) no-repeat center center; automaticamente allinea il centro allo schermo.
questo sembra funzionare sul nostro sito, usando le vostre idee e un po 'di matematica basato sul bordo sinistro del div wrapper. Sembra ridondante andare a sinistra del 50%, quindi togliere il margine extra del 50%, ma sembra funzionare.
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
ho cercato di implementare la risposta di Jaap all'interno this page della mia recente sito, con una differenza: il .main {height:} è stato impostato per l'auto invece di un valore fisso px. Come sviluppatore reattivo sto cercando una soluzione per sincronizzare l'altezza dell'immagine con l'elemento di testo mobile a sinistra, ma solo nel caso in cui l'altezza del mio testo diventa maggiore della mia altezza effettiva dell'immagine. In tal caso l'immagine non deve essere ridimensionata, ma ritagliata e centrata come descritto nella domanda originale qui sopra. Questo può essere fatto? È possibile simulare il comportamento ridimensionando lentamente la larghezza del browser.
Questo problema è un enorme dolore in a .. ma alla fine ho capito. Ho visto molte soluzioni complicate. Questo è così semplice ora che lo vedo.
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}
Nessuna delle soluzioni di cui sopra stava funzionando bene per me.Avevo bisogno di un formato immagine dinamica per adattarsi in un contenitore padre circolare con overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
esempio Lavorare qui: http://codepen.io/simgooder/pen/yNmXer
Grazie per la vostra risposta, ho cercato un modo per farlo per alcune notti e l'avete risolto! –
Nessun problema! Ci sono voluti molti problemi, ma ha così tante applicazioni - è quasi indispensabile. –
Grazie! Sono tornato a questo problema nel tempo, perché non sono mai stato soddisfatto al 100% con altre soluzioni ... 'trasforma: tradurre 'essere troppo pignolo. Ho provato un certo numero di volte a usare 'margin: 0 auto' che non ha funzionato. La vera magia avviene con 'margin: 0 -100%' invece del valore 'auto' :) – aequalsb
trovato questo bel sollution da Melissa PENTA
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
Centro qualsiasi immagine in formato div
Utilizzato con involucro arrotondata e le immagini di diverse dimensioni.
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
esempio Lavorare qui codepen
E 'abbastanza difficile capire che cosa è esattamente il problema e che cosa fare si tenta di raggiungere. È [che it] (http://jsfiddle.net/teneff/wjw83/3/)? – Teneff
su http://bit.ly/MaYbMB, il tab "coaching" scuote un po 'se lo si passa sopra. Voglio risolvere quella posizione usando: assoluto. Il problema è che l'overflow: hidden non influenza un elemento child con position: absolute. – Puyol