Jump to content
  • 0

Респонсив верстка. Изображения


yaparoff
 Share

Question

Верстаю респонсив. В макете есть вот такой блок
i764ec446291cd7fa.th.jpg

Дело в том что при разной ширине экрана действительная высота блоков меняется. На некоторых экранах это выглядит вот так:
 S95aecb6e80f3b3ba.th.png

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

Вот здесь сама верстка:




 

 

Edited by yaparoff
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Да, именно так!
Но я не до конца понимаю как это работает. Можете объяснить?
Также не понятна строка 113: 
 font-size: calc(38 * 100vw / 1366);    - откуда берутся значения 38 и 1366 ?

Можете порекомендовать ресурс, где таким вещам научиться? )

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Evilejik
      Доброго всем дня! Подскажите, пожалуйста, начинающему верстальщику. Как сделать подобное в строку и что бы крайние изображение растягивались на всю ширину экрана, в зависимости от того, какое разрешение у пользователя. К слову, может есть способы не картинками, а блоками сделать подобное? Скриншот прилагаю. 

    • By San4ous
      Привет, подскажите пожалуйста, как мне сделать рамку вокруг изображения, между которыми можно вставить текст (как подпись к картинке), т.е как в Википедии. Если что, работаю в Sulime text html
    • By Andrey_Afonchenko
      Здравствуйте! Помогите, пожалуйста!
      Есть два блока (div): один с картинкой, а другой с текстом.
      Нужно реализовать: сначала блок с картинкой должен перекрывать блок с текстом, а потом блок с текстом должен перекрывать блок с картинкой.
      Для этого я делал в попытке реализации данного эффекта:
      .image
      {
          display: inline-block;
          Position: absolute;
          z-index: 1;
      }
      @Keyframes block_overlap
      {
          from
          {
              z-index: 0;
          }
          to
          {
              z-index: 2
          }
      }
      .text
      {
          display: inline-block;
          position: absolute;
          animation-name: block_overlap;
          animation-duration: 1s;
      }
      Данный код не привёл к решению проблемы.
       
    • By SnowSilver
      Подскажите, как можно преобразовать растровое изображение в векторное, без потери качества?

      Изображение вроде не сложное, без высокой детализации... я пробовал использовать трассировку в Adobe Illustrator, но там изображение деформируется, меняется, линии не ровные получаются...

      Как это можно сделать?
      Исходное изображение в png и пример в simple.svg - то что получил трассировкой в Illustrator
      Simple.svg

    • By SnowSilver
      Подскажите, как можно преобразовать растровое изображение в векторное, без потери качества?

      Изображение вроде не сложное, без высокой детализации... я пробовал использовать трассировку в Adobe Illustrator, но там изображение деформируется, меняется, линии не ровные получаются...

      Как это можно сделать?
      Исходное изображение в png и пример в simple.svg - то что получил трассировкой в Illustrator

      Simple.svg
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy