Предотвращение делений от растяжения его фонового изображения

Question

У меня есть DIV с фоном изображения определяется следующим образом в моей таблице стилей:

.information_photo { 
 
    position: relative; 
 
    top: 30px; 
 
    width: 100%; 
 
    height: 200px; 
 
    background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: 100% 100%; 
 
}

<div class="information_photo"></div>

Как вы можете видеть, что это растягивает исходное изображение, вместо этого я хочу, чтобы он просто фокусировался на части фонового изображения без растягивания или изменения размера.

Answer 1

Значение 100% 100%background-size означает, что фон должен растягиваться (100%) от ширины элемента и (100%) от высоты элемента. Установите ли они один из них: auto, который будет автоматически определять размер неопределенного размера, сохраняя при этом соотношение сторон изображения.

Затем вы можете выбрать, какую часть изображения можно увидеть, отрегулировав соответствующий стиль background-position.

.information_photo { 
 
    position: relative; 
 
    top: 30px; 
 
    width: 100%; 
 
    height: 200px; 
 
    background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-position: center -30px; /* Visible 30 px from the top */ 
 

 
    /* 100% height, auto width */ 
 
    background-size: auto 100%; 
 

 
    /* 100% width, auto height */ 
 
    background-size: 100% auto; 
 
    /* or simply */ 
 
    background-size: 100%; 
 
}

<div class="information_photo"></div>