Адаптивные полноэкранные изображения без потери качества, возможно? - PullRequest
Новая
       17

Адаптивные полноэкранные изображения без потери качества, возможно?

1 голос
/ 26 августа 2011

Привет, сообщество stackoverflow, надеюсь, у вас хороший день:)

Прямо к делу: я начал планировать новое портфолио (кстати, я арт-директор),И моя оригинальная идея состояла не только в том, чтобы сделать портфель отзывчивым (я думаю, 1024x768px вплоть до 2560x1600px), но также и иметь хороший предварительный просмотр работы через полноэкранные изображения браузера.

ожидаю, что у меня возникла проблема.Изображение, полностью соответствующее 2560x1600px, не изменится, скажем, 1440x900px без потери качества или искажения.

Так что я действительно могу использовать вашу помощь и опыт, ребята ... Есть ли "идеальный" размер изображения,изменение размера до следующих разрешений: 1024x768px, 1280x800px, 1280x1024px, 1440x900px, 1920x1080px, 2560x1600px.Возможно ли это сделать?

Я очень ценю вашу помощь.Заранее спасибо:)

Ответы [ 3 ]

1 голос
/ 26 августа 2011

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

Масштабирование изображения и изменение соотношения сторон всегда вызывают искажения.

1 голос
/ 23 июня 2013

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

Вот хороший и простой совет только с css / html:

Ингредиенты

  • Прозрачное изображение PNG с желаемым соотношением (Прозрачно-отношение-conserver.png)

  • тег

  • Различные изображения для разных портов просмотра (retina.jpg, desktop.jpg, tablet.jpg ...)

Идея состоит в том, чтобы открыть тег и присвоить ему прозрачное изображение (с нашим желаемым соотношением). Мы также добавляем class = "responseive-image", это все в HTML. 

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

В CSS мы устанавливаем размер фона в соответствии с размером и выбираем ширину нашего изображения. 

.responsive-image{
    width: 100%;
    background-size: 100% 100%;
}

и, наконец, мы подаем для каждого порта просмотра правильное изображение: 

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../img/mobile-ld.jpg');
    }
}

Демоверсию можно загрузить с здесь .

1 голос
/ 26 августа 2011

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

Возможны следующие варианты:

  1. Масштабирование изображения (пропорционально) настолько, насколько его можно масштабировать, чтобы он заполнял одно измерение экрана и не совсем заполнял другое измерение.Это самое большое необрезанное изображение, которое можно отобразить.
  2. Масштабируйте изображение (пропорционально) до тех пор, пока оно полностью не заполнит экран.Если экран не совсем той же формы, что и изображение, тогда изображение необходимо будет увеличить, чтобы заполнить экран.Отображение изображения обрезает часть изображения в одном направлении.Это нормальный способ масштабирования изображения для полного «заполнения» экрана.Если изображение создано с некоторым «лишним» и неважным пространством по краям, то его обрезка из-за увеличения масштаба для заполнения не приведет к каким-либо проблемам.
  3. Масштабируйте изображение, как в варианте № 1и используйте согласованный цвет фона, чтобы заполнить любую область экрана, не покрытую изображением.
  4. Создайте контейнер или рамку, точно такую ​​же форму, как ваше изображение, и масштабируйте изображение, чтобы заполнить его.
  5. Масштабируйте изображение непропорционально, чтобы точно заполнить весь экран.Это растянет изображение в одном направлении больше, чем в другом, и изображение будет несколько искажено, но ничего не будет обрезано, и весь экран будет покрыт.Круглые объекты будут иметь эллиптическую форму, а другие формы будут искажены.

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

...