Jump to content
  • 0
Sign in to follow this  
Kh4N

Выравнивание изображеня при растягивании

Question

Kh4N    1

Доброй уже ночи.

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

Как можно сделать выравнивание как Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. или Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. где верхний и нижний край изображения остаётся на одном уровне?

Спасибо.

Share this post


Link to post

6 answers to this question

Recommended Posts

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
Kh4N    1

если  закрепить верх, то при растяжке будет уезжать низ, центр - и верх и низ и тд

Share this post


Link to post
  • 0
4 минуты назад, Kh4N сказал:

если  закрепить верх, то при растяжке будет уезжать низ, центр - и верх и низ и тд

Ну да, именно так и в первом примере который вы привели - закреплено по центру
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

9ccc1a2bc3.png
Изображения то пропорционально изменяются, поэтому по другому никак. Ищите подходящую, компромиссную позицию.
А во втором примере, просто статичное, не резиновое изображение.
c61f031353.png

Share this post


Link to post
  • 0
Kh4N    1

Ясно, спасибо!

Может тогда подскажете более-менее подходящее соотношение или что-то ещё?

Share this post


Link to post
  • 0

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

1) Как во втором вашем примере - растянуть блок с изображением на 2000 пикселей в ширину, отцентровать и вставить в хэд код скрывающий горизонтальный скроллинг

<style>
   html {
    overflow-x: hidden
   }
  </style>



2) Возьмите за основу высоту в  768 пикселей - минимальная высота первого экрана (для ноутбуков), растяните блок с изображением на 100% ширины и прикиньте, сколько в процентах от 768 пикселей будет занимать ваше изображение в высоту.  Смотрите в браузере ID блока с изображением и вставляете в хэд следующий код:
 

<style>
 #u000 {
 height: 100vh;
 }
 </style>

где u000 = Id вашего блока
100 - замените на то процентное значение которое вычислили.
На всех мониторах ваше изображение будет выглядеть одинаково. Для этого способа надо подбирать максимально качественное большое изображение 2000 пикс в ширину минимум

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...