Как сделать изображение с обрезанным центром?

Ответ 1

Прочитайте комментарии в коде для объяснения.

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

Ответ 2

Используйте прокладку. U нужен контейнер, на который вы устанавливаете ширину в процентах, высоту 0 и заполнение снизу, чтобы создать соотношение сторон, которое вы ищете. Если вы можете установить свое изображение в качестве фона, это еще проще.

Я написал для этого sass mixin, а также небольшой учебник по моему блогу, который содержит немного более подробное объяснение: http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html

Если вам нужно иметь изображение в теге изображения, дайте мне знать, это возможно, но не так быстро

Ответ 3

Добавляет ли это (fiddle) к .center-cropped-img, чего вы хотите? или вы не хотите менять область, которая обрезается?

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

Ответ 4

Является ли это Fiddle правильным обрезкой?

С помощью следующего CSS мы можем поддерживать соотношение сторон контейнера при изменении размера окна.

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

Ответ 5

В следующем решении используется свойство CSS background-size. Изображение помещается в фоновом режиме. Тег <img> используется так, чтобы поисковые системы могли видеть изображение.

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

Ответ 6

Я пробовал с script. Я просто создал функцию и вызвал загрузку и повторную сортировку.

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

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

См. в действии.

Ответ 7

просто укажите ширину в% вместо px.

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