Come rendere sensibile l'immagine ritagliata al centro?

Question

Sulla base di un existing answer, sono riuscito a centrare un'immagine ritagliata. Tuttavia, ho problemi a rendere reattiva l'immagine ritagliata al centro.

Domanda

Quando possibile ridurre la dimensione della finestra del browser web, il centro ritagliata immagine non ridimensionare bene. Invece, mantiene fisso height e width e sversamenti fuori dalla porta di visualizzazione. Il problema è forse dimostrato più chiaramente con uno Fiddle.

Come è possibile ridimensionare correttamente la scala dell'immagine centrale ritagliata? Idealmente l'immagine ritagliata al centro si ridimensiona bene mentre è ancora ritagliata e mantiene un rapporto di aspetto simile.

.centered-container { 
 
    max-width: 960px; 
 
    margin: auto; 
 
} 
 
.center-cropped-img { 
 
    width: 640px; 
 
    height: 360px; 
 
    overflow: hidden; 
 
    margin: 10px auto; 
 
    border: 1px red solid; 
 
    position: relative; 
 
} 
 
.center-cropped-img img { 
 
    position: absolute; 
 
    left: -100%; 
 
    right: -100%; 
 
    top: -100%; 
 
    bottom: -100%; 
 
    margin: auto; 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
}

<div class="centered-container"> 
 
    <div class="center-cropped-img"> 
 
    <img src="http://i.imgur.com/Ag2ZCgz.png" alt="" /> 
 
    </div> 
 
    <div class="center-cropped-img"> 
 
    <img src="http://i.imgur.com/BQUgmlB.png" alt="" /> 
 
    </div> 
 
</div>

Ancora una volta, ecco un Fiddle che forse illustra il problema meglio che in prosa.

Answer 1

basta dare la larghezza in% anziché px.

.center-cropped-img { 
    width: 640px;// add in % 
    height: auto; 
    overflow: hidden; 
    margin: 10px auto; 
    border: 1px red solid; 
    position: relative; 
} 

Answer 2

Utilizzare l'hack di imbottitura. U bisogno di un contenitore, che si imposta per essere una larghezza in percentuale, altezza 0 e riempimento sul fondo per creare le proporzioni che stai cercando. Se è possibile impostare l'immagine come sfondo è ancora più semplice.

Ho scritto un mixin Sass per questo, e anche un piccolo tutorial sul mio blog che viene fornito con un po 'più ampia spiegazione: http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html

Se avete bisogno di avere la vostra immagine in un tag di immagine, fatemelo sapere , è anche possibile, ma non altrettanto veloce

Answer 3

Aggiungendo questo (fiddle) a .center-cropped-img ottieni ciò che desideri? o non vuoi cambiare l'area che viene ritagliata?

max-width: 640px; 
    width: 100%; 

Answer 4

Questo Fiddle esegue il ritaglio corretto?

Con il seguente CSS è possibile mantenere le proporzioni del contenitore durante il ridimensionamento della finestra.

width: 640px; 
max-width: 100%; 
height: 0; 
padding-bottom: 50%; // 320px or lower (half of the width) 

Answer 5

Leggere i commenti nel codice per una spiegazione.

JSFiddle

HTML

<div class="container"> 
    <img src="http://i.imgur.com/Ag2ZCgz.png" alt="" /> 
</div> 
<div class="container"> 
    <img src="http://i.imgur.com/BQUgmlB.png" alt="" /> 
</div> 

CSS

/*some basic markup for a flexible container to crop the image*/ 
.container { 
    width: 80%; 
    border: 3px red double; 
    margin: 50px auto; 
    padding:0; 
    overflow: hidden;/*do not show image that is overflowing*/ 
    background-color: yellow; 
} 
.container img { 
    display: block; 
    width: 200%;/** (1/part of the total image width you want shown)*100% In this example you want to show 50% of the image-width**/ 
    margin-left:-50%;/*move the image to the left, removing that content from view (and making content on the right appear). -0% will show the left side of the image. The negative value of the defined width in the rule before this one + 100% will show you the right side of the image. I guess you can figure the rest out by changing this value.*/ 
    margin-top: -25%;/*changing the top and bottom values is a bit of a pain. After some trial and error (in google chrome) it appears they are based on the width of the image container, not the height (how unusual is that!!!). So putting -100% in this value would (re)move the image up by the px value of the width of the #container div. If you are using css sprites you should avoid setting this value other than 0%. 
Alternatively do some math on the original dimensions of the image: -(vertical pixels you want off the image)/(image width)* 100% should work for pixel precision). 
The good news is that the image scales with the #container div. So the image grows and shrinks with the container showing the exact same part of the image (and not showing more/less content).*/ 
    margin-bottom:-25%;/*(re)move some of the bottom part of the image. See margin-top for more (works identical)*/ 
} 

Answer 6

La seguente soluzione utilizza CSS background-size proprietà. L'immagine è posizionata sullo sfondo.Il tag <img> viene utilizzato in modo che i motori di ricerca possano vedere l'immagine.

/* responsive 40% wide, 4:3 aspect ratio container */ 
 
.centered-image { 
 
    width: 40%; 
 
    padding-top: 30%; 
 
    background-position: center center; 
 
    /* optional */ 
 
    margin: 1em auto; 
 
    box-shadow: 0 0 .5em .25em black; 
 
} 
 
.centered-image.cropped { 
 
    background-size: cover; 
 
} 
 
.centered-image.scaled { 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
} 
 
/* use your favorite text hiding technique */ 
 
.centered-image img { 
 
    display: none; 
 
} 
 
/* miscellaneous */ 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    width: 40%; 
 
    margin: 1em auto; 
 
    font: bold medium monospace; 
 
}

<h1>Cropped to Fit</h1> 
 
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/400/sports/1/);"> 
 
    <img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt=""> 
 
</div> 
 
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/200/sports/2/);"> 
 
    <img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt=""> 
 
</div> 
 
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/200/400/sports/3/);"> 
 
    <img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt=""> 
 
</div> 
 
<h1>Scaled to Fit</h1> 
 
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/400/sports/1/);"> 
 
    <img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt=""> 
 
</div> 
 
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/200/sports/2/);"> 
 
    <img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt=""> 
 
</div> 
 
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/200/400/sports/3/);"> 
 
    <img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt=""> 
 
</div>

Answer 7

ho cercato con uno script. Ho semplicemente creato una funzione e richiesto il caricamento e il ridimensionamento.

jQuery

$(document).ready(function() { 
    heightMan(); 

    $(window).resize(function() { 
     heightMan(); 
    }); 
}); 

function heightMan() { 
    var winHeight = $(window).height(); 
    var winHeight_50 = (winHeight/2) - 20; 

    var container_node = $('.center-cropped-img'); 
    var container_height = container_node.height(); 
    container_height = winHeight_50; 

    container_node.css('height', container_height); 
} 

CSS Cambia

.center-cropped-img { 
    width: 64%; 
    overflow: hidden; 
    margin: 10px auto; 
    border: 1px red solid; 
    position: relative; 
} 

See in action.