Как обрезать фото по краям и поместить картинку в центр при уменьшении окна браузера?

Question

[survivor2005]

Добрый день коллеги.
Собственно вопрос:
Как при уменьшении окна браузера , автоматически скрывались по обе стороны края картинки, так что бы видимая часть картинки была по центру, а не только левая сторона. Не знаю понятен ли вопрос...Что бы края отсекались на столько на сколько уменьшалось бы окно браузера. Такое часто можно наблюдать на адаптивных сайтах, где на ПК видна вся картинка, а на мобильной версии только центр картинки, то что самое важное.
И возможно ли это сделать без js? Спасибо.

Answer 1

[Юпитер Макс]

ну обычно картинки под адаптив делают на 100% ширины и auto высоты

но если надо так, то сначала делаете родительский блок с overflow:hidden; , в него еще один блок с абсолютной позицией по центру и в него картинку

Comments

[survivor2005]

если я правильно понял, то это вот так типа:

//<div class="first-block">
    <div class="second-block">
    <img src="bla/bla.jpg">
    </div>
</div>
<style>
.first-block {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 500px;
    }

.second-block {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
<style>

Так вот не работает, все равно правая часть картинки обрезается а не обе. //

[Юпитер Макс]

survivor2005, нужно second-block позиционировать на 50% слева или справа и потом по центру к примеру если блок 200px по ширине, тогда left:50%; margin-left:-100px;

В общем этот блок у вас должен быть обязательно с фикс шириной, чтобы он позиционировался по центру при уменьшении родительского