Позиция изображения, эквивалентная фоновой позиции

Я работаю над веб-сайтом, и хочу стилизовать образ, как вы, стиль фона с фоновой позицией: центр. Есть ли эквивалент этого для обычного изображения?Позиция изображения, эквивалентная фоновой позиции

Спасибо заранее,

Luuk

EDIT:

Изображение отзывчивым и содержится в контейнере.

CSS:

.img-container { 
max-height: 300px; 
overflow: hidden; 
} 

.img-container img { 
max-height: 100%; 
max-width: 100%; 
}

источник

2017-02-14 Luuxter

Можете ли вы предоставить то, что вы до сих пор? Это поможет увидеть ваш HTML. –

Я хотел бы сделать что-то вроде этого, чтобы расположить изображение по центру.

.img-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    max-height: 300px; 
    overflow: hidden; 
} 

.img-container img { 
    max-height: 100%; 
    max-width: 100%; 
}

источник

2017-02-14 22:00:28

Большое вам спасибо! Именно то, что я искал. Также было некоторое случайное пробельное пространство между моим изображением и навигатором, которое теперь исчезло. Спасибо! : D – Luuxter

@Luuxter это не работает кросс-браузер, помните об этом. –

@WarreBuysse Я заметил, спасибо, что напомнил мне. В этом случае, к счастью, это не проблема. – Luuxter

Вы можете пойти на дисплей flex, но поддержка IE довольно катастрофическая. Если вам небезразлична поддержка браузера (что вам нужно), перейдите к приведенному ниже примеру.

<div class="list"> 
    <div class="item"> 
    <img src="https://unsplash.it/50/40" alt="">  
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50/60" alt=""> 
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50/30" alt=""> 
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50" alt=""> 
    </div> 
</div>

Sass:

.list { 
    text-align: center; 
} 

.item { 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
    height: 5rem; 
    width: 5rem; 
    background: red; 

    img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    } 
}

Убедитесь добавить префиксы для преобразования атрибутов, а также.

Fiddle: https://jsfiddle.net/k433b6up/

источник

2017-02-14 22:12:26

Ваш желаемый результат не совсем понятно, но вот некоторые варианты для двух различных интерпретаций:

Изменения отображения свойства изображения и задающее выравнивание текста в его контейнер будет сохранить его нативную высоту и ширину, а центрирования его в контейнере:

.img-container { 
    max-height: 300px; 
    overflow: hidden; 
    text-align: center; 
} 

.img-container img { 
    display: inline-block; 
    max-height: 100%; 
    max-width: 100%; 
}

Демонстрация: https://jsfiddle.net/5suo8tbw/

Если вы пытаетесь выполнить фоновое заполнение с помощью элемента img, вам следует использовать атрибут object-fit: cover. Это всегда будет заполнять размеры вашего контейнера, поддерживать соотношение сторон изображения и центрировать его в контейнере.

.img-container { 
    max-height: 300px; 
    overflow: hidden; 
} 

.img-container img { 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
}

Демо: https://jsfiddle.net/5suo8tbw/1/

Вот ссылка на спецификацию: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Для перекрестной поддержки браузера, проверьте polyfill: https://github.com/anselmh/object-fit

источник

2017-02-15 01:02:26 rjgrazioli

Позиция изображения, эквивалентная фоновой позиции

ответ

Смежные вопросы