Jak sprawić, aby obraz w środku kadru był responsywny?

Question

Na podstawie existing answer udało mi się wycentrować przyciąć obraz. Mam jednak problem z dostosowaniem centralnie przyciętego obrazu.

Pytanie

Kiedy zmniejszyć rozmiar okna przeglądarki internetowej, centrum przycięty obraz nie skalować w dół ładnie. Zamiast tego utrzymuje on stałe wartościiz portu widokowego. Problem ten może być wyraźniej zademonstrowany dzięki Fiddle.

Jak sprawić, aby centralnie przycięty obraz był ładnie skalowany? Idealnie przycięty w środku obraz będzie ładnie skalowany, a jednocześnie będzie przycinany i zachowywał podobny współczynnik kształtu.

.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>

Ponownie, tutaj jest Fiddle że może demonstruje problem lepiej niż w prozie.

Answer 1

wystarczy podać szerokość w% zamiast px.

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

Answer 2

Użyj wyściółki wyściółki. U potrzebujesz pojemnika, który ustawisz na szerokość wyrażoną w procentach, wysokość 0 i dopełnienie u dołu, aby utworzyć pożądany współczynnik kształtu. Jeśli możesz ustawić swój obraz jako tło, to jest jeszcze łatwiejsze.

Napisałem mixin Sass za to, a także mały tutorial na moim blogu, który pochodzi z trochę bardziej szczegółowe wyjaśnienia: http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html

Jeśli chcesz mieć swój obraz w tagu obrazu, daj mi znać , jest to również możliwe, ale nie tak szybkie.

Answer 3

Czy dodanie tego (fiddle) do .center-cropped-img pozwala uzyskać to, czego oczekujesz? lub czy nie chcesz zmieniać obszaru, który jest przycinany?

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

Answer 4

Czy to Fiddle wykonuje odpowiednie przycinanie?

Dzięki poniższym CSS możemy zachować proporcje kontenera podczas zmiany rozmiaru okna.

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

Answer 5

Przeczytaj komentarze w kodzie dla objaśnienia.

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

Poniższe rozwiązanie używa CSS background-size nieruchomości. Obraz jest umieszczony w tle.Znacznik <img> jest używany, aby wyszukiwarki mogły zobaczyć obraz.

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

Próbowałem ze skryptu. Po prostu utworzyłem funkcję i wywołałem ładowanie i zmianę rozmiaru.

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 Zmienia

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

See in action.