1

Есть рисунок который я поместил в контейнер. Контейнер имеет свойство border: 5px ridge #254c72;. Проблема в том, что когда я масштабирую страницу, между рисунком и рамкой контейнера появляется пространство свободное. Оно может возникнуть с любой стороны, либо с обеих одновременно. Подскажите пожалуйста как решить проблему. margin:0 и padding:0 проблемы не решают.

 <style>
    content div{
        border: 5px ridge #254c72;
        display: inline-block;        
    }
    content img{
        display:block;
    }
 </style>

<header>
    <img src="img/title.jpg" alt="header image">
</hader>
<h1>Компьютерная графика и web-дизайн</h1>
<content>
    <div><img src="design/small/p0.jpg" alt="sunset"></div>
    <div><img src="design/small/p1.jpg" alt="girl"></div> 
    <div><img src="design/small/p2.jpg" alt="cats"></div>
    <div><img src="design/small/p3.jpg" alt="matrix"></div>
    <div><img src="design/small/p4.jpg" alt="abstraction"></div>
    <div><img src="design/small/p5.jpg" alt="step"></div>
    <div><img src="design/small/p6.jpg" alt="suslic and suslikcathead"></div>
</content>

на этой картинки слева и справа появился отступ

3 ответа 3

1

Вариант простой: из тега img перенесите изображение в фон DIV'а. У вас во-первых будет меньше кода и во вторых - фон проще настроить, как по мне. DIV'у добавите размеры и будет вам счастье.

2
  • 1
    Плюс браузер будет фон более "настойчиво" кэшировать.
    – user239133
    1 авг 2018 в 18:46
  • минус – если не знаешь размеров картинки, то вариант не подходит. 2 авг 2018 в 10:28
0

Примените бордер не к контейнеру, я прямо к img.

2
  • Пробовал, к сожелению эффект тот же.
    – Smuk
    1 авг 2018 в 21:37
  • тогда попробуйте явно указать размеры контейнера, равные размерам картинки. 1 авг 2018 в 22:03
0

Решил вопрос тем, что задал картинке свойство margin: -1px;. Результат меня устроил. Скорее всего это лишь некоректная работа Хрома, так как в Файерфоксе ничего похожего с бордерами не наблюдалось. Если бы свойство border находилось на картинке, проблема бы не исчезла.

1
  • Кстати, бывают еще проблемы из-за неадекватных округлений дробных пикселов. Поэтому часто лечит что-то вроде margin:-0.5px и даже ... -0! 3 авг 2018 в 22:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.