Image Stretching in Standard HTML

-2

Текущий сценарий: Я создаю приложение, которое принимает изображение, и мы устанавливаем фон. Я хочу обслуживать это приложение на мобильных устройствах, настольных компьютерах и планшетах.Image Stretching in Standard HTML

Вопрос:

Я хочу знать, что лучший способ, чтобы растянуть и показать изображение (без участия лаг страницы). Как включить дизайн жидкости?

Код:

Я в настоящее время пытается что-то вроде этого. Любые улучшения помогут!

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

источник

2014-11-26 Dark Knight

Включите код, который вы пробовали. Большинство людей не хотят помогать, если вы даже не пробовали что-то самостоятельно. Благодаря! –

[Этот пост на GraphicDesign.SE] (http://graphicdesign.stackexchange.com/questions/41834/best-practices-for-full-width-browser-images/41894#41894) может быть полезным –

Выполнено. Я добавил код. Я не понимаю, почему люди отрицают мой вопрос, когда это вопрос, связанный с дизайном. Не каждый вопрос НЕ обязательно имеет код. Это абсурдно. Иногда дизайн имеет гораздо большее влияние, чем несколько LOC. Сказав это, я добавил свой код. –

В современных браузерах, самый простой способ будет использовать следующий CSS:

#background-selector { 
    background-image: url('image.jpg'); 
    background-size: cover; 
}

EDIT OP с тех пор добавил код на свой пост, так что это не может быть наиболее подходящим ответом ,

источник

2014-11-26 18:03:42

Это зависит от образа:

Если изображение содержит объекты, которые не могут быть легко растягиваются, как текст, портреты, фотографии животных или велосипеды и т.д., вам необходимо сохранить исходные пропорции («Aspect Ratio»).

Используя только CSS есть 3 способа масштабировать и сохранить пропорции - ни один из них не будет работать абсолютно на всех видах устройств:

«содержит» оставляет зазор либо в сторонах или в нижней части и сверху в зависимости от размера устройства:

body { 
    background: url(images/bg.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain; 
}

«крышка» держит фон заполнен, но увеличение масштаба изображения в зависимости от размера устройства - вы не будете не в состоянии увидеть часть из вверху и внизу изображения:

body { 
    background: url(images/bg.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
}

ПРИМЕЧАНИЕ Фон-размер CSS3 и не будет работать со старыми версиями IE

CSS2 - третье решение работает во всех браузерах и ведет себя похоже на «фон-размер: содержать; ' - Если изображение на экране не соответствует изображению, вы почувствуете пробел:

.img_width { 
    width: 100%; 
    height: auto; 
}

источник

2014-11-26 20:04:06 jan199674

Image Stretching in Standard HTML

ответ

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