Отзывчивый дизайн изображения с заданной высотой

Я нашел, если кто-нибудь может помочь мне с небольшой проблемой с отзывчивыми изображениями.Отзывчивый дизайн изображения с заданной высотой

У меня есть высота, я хочу, чтобы мое изображение было. 200 px и около 100% от ширины контейнера. Это создает проблему, что изображения растягиваются и не выглядят хорошо. Я подсчитал, что если я смогу сделать изображения, сохраняйте свои отношения и все еще выглядите хорошо. могу ли я иметь контейнер вокруг него с установленной высотой и сделать так, что переполнение скрывается за каждой вещью сверху и снизу и как я могу сделать это самым простым способом?

How the site looks atm

Любые другие sugestions как я могу решить эту проблему?

источник

2016-05-18 Johan H

Пожалуйста, внесите ваш код. – super11

Вы можете использовать 'background-size: cover'. Проверьте это [** link **] (https://css-tricks.com/almanac/properties/b/background-size/) – Pugazh

width: auto, height: 200px. margin: 0 auto –

То, как вы решаете эту проблему, неверно. Вы не можете установить ограничение на height и width и сохранить соотношение сторон изображения.

Что касается этого случая, рассмотрим следующий CSS:

img { 
    height: 200px; 
    width: auto; 
}

источник

2016-05-18 07:52:12 activatedgeek

Существует атрибут CSS называется background-size, которые я обычно использую для таких ситуаций. background-size в сочетании с background-position может быть тем, что вы ищете. Пример ниже.

body { 
 
    margin: 0; 
 
    background-color: #CCCCCC; 
 
} 
 

 
.container { 
 
    width: 500px; 
 
    margin: 15px auto; 
 
    padding: 15px; 
 
    background-color: #FFFFFF; 
 
} 
 

 
.hero { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-image: url('http://www.redcross.org/images/MEDIA_CustomProductCatalog/m17844381_TheHero_763x260_PRE.JPG'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="hero"></div> 
 
    <div class="content"> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p> 
 
    </div> 
 
</div>

В моем примере «герой» изображение 763x260px и контейнер DIV, который отображается в это 470x200px, но она по-прежнему вписывается в «лучший способ», чтобы это контейнер.

источник

2016-05-18 07:52:42 thepio

Вы можете легко сделать это, используя background-size:cover

источник

2016-05-18 08:41:33

Отзывчивый дизайн изображения с заданной высотой

ответ

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