1 Topic by PunBB

Topic: Как с помощью CSS сделать обрезку картинки до определенного размера?

Допустим есть блок 200х500 пкс, там умещается картинка 200х300 пкс(сверху), и текст 200х300 пкс (соответственно снизу).

Вот заливаю я картинку на сервер, ставлю img src() + класс, и картинка чудесным образом обрезается до размеров 200х300 пкс, и нет никаких белых полей по бокам и сверху/снизу, не растянута и не сжата(т.е. соотношение тоже самое как и большой картинки).

Как это можно реализовать с помощью css или js?

Вот несколько примеров

2 Reply by PunBB

Re: Как с помощью CSS сделать обрезку картинки до определенного размера?

Можно не через img, а через background:

<div class='image'></div>

.image{
  width: 200px;
  height: 300px;
  background: url('ваша картинка') no-repeat center center;
  background-size: cover;
}

Картинка впишется по центру контейнера

3 Reply by PunBB

Re: Как с помощью CSS сделать обрезку картинки до определенного размера?

Этот класс растянет картинку на всю ширину блока, и автоматически построит ее высоту.

.img-reponsive {
display:block;
width:100%;
max-width:100%;
height:auto;
}

ну и похожий класс описать для варианта 100% hegit и width:auto;

1. Вы используете бутстрап, там этот код уже есть (написанный в этом примере), удалите его из своих стилей, в Ашем случае достаточно просто к картинке добавить img-responsive.
2. Если надо ограничить по высоте, то можно сделать например так:

<div class="img-block">
    <img class="img-responsive" src="assets/img/636889-1366x768(1).jpg">
</div>

ну и 

.img-block {
    height: 200px;
    overflow: hidden;
}

4 Reply by PunBB

Re: Как с помощью CSS сделать обрезку картинки до определенного размера?

<div class="crop">
    <img src="..." alt="..." />
</div>


.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}