Задать вопрос
tolfy

Antony Bark

Фирменный стиль
Ответы пользователя по тегу Bootstrap

  • Позиционнирование изображение внутри блока?

    tolfy
    @tolfy
    Фирменный стиль
    Рискну предложить, возможно не самый лучший, но быстрый и практически беспроблемный вариант с использованием background-image

    <div class="img-block"  style="background-image: url(something.img)">
     <img href="something.img" />
</div>

    в принципе, имеем так:
    <div class="img-block"  style="background-image: url(something.img)">
</div>

    .img-block {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.img-block img {
    opacity: 0;
}


    Скрываем IMG, вместо него показываем background-image.
    Плюсы: кроссбраузерность, лёгкая правка кода, не требуется подготовка иллюстраций
    Минусы: засорение кода, хотя, если СЕО не так важно и заданы размеры блока, то <img> можно совсем удалить.
    * если во все <img> вставлять один и тот же файл something.img, этим можно контролировать линейные размеры блока <div>, не указывая его размер в стилях.

    пример https://codepen.io/tolfy/pen/MGVbwJ
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать сайты большей ширины, чем твой экран?

    tolfy
    @tolfy
    Фирменный стиль
    единственно вменяемый способ вёрстки, если монитор меньше, чем макет:

    1. из фотошоп сохраняем макет 1:1 в jpg\png
    2. вставляем его подложкой
    html{min-width:1600px;background:red url('maket1600.png') left top no-repeat;}

    3. далее верстаем как обычно, подложка неплохо помогает видеть несовпадения вёрстки с макетом, а для просмотра вёрстки, не входящей по ширине в окно, тягаем гориз.скролл*

    * т.к. у нас принудительный гор.скрол, то для оценки ошибок вёрстки по ширине даём red, если косяк - справа появится красный край
    ** учитываейте, что body и остальные слои поверх подложки на время вёрстки обязательно надо background-color: transparent
    Ответ написан
    Комментировать
    Комментировать