Как остановить img от переполнения?

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

<body> 
    <header class="mainheader"> 
    <a href="main.html" class="navelement"> 
     <div class="imgcontainer"> 
      <img src="https://lh3.googleusercontent.com/-Ajc8gSO3SRw/VtZj0tsyXhI/AAAAAAAAAHs/tlsdyufJ1J4/w868-h560/2.png"/> 
     </div> 
    </a> 
    </header> 
</body>

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

* { 
    box-sizing: border-box; 
} 
body{ 
    margin: 0; 
} 
header{ 
    height:10vh; 
    width: 100%; 
    float left: 
    margin: 0; 
    background-color:grey; 
    font-family: 'Teko', sans-serif; 
    display: inline-block; 
} 
header .navElement { 
    vertical-align: middle; 
    float:left; 
    width: 17%; 
} 
.imgcontainer{ 
    float:left; 
    max-height: 100%; 
} 
.imgcontainer img{ 
    float:left; 
    max-height:100%; 
}

Я понимаю, что некоторые вещи, которые не нужны, но его потому, что я пытался так много, чтобы исправить это, что я не знаю, что работает. Спасибо за любые полезные ответы.

источник

2016-08-04 Fzzz

«Я понимаю, что некоторые вещи не нужны, но это потому, что я так много пытался исправить, что не знаю, что работает». Регулярно сохраняйте свою работу или работайте с учебником, чтобы вы могли легко вернуться с ошибочной версии к более надежной. – technico

Установите фоновое изображение, его проще, и вы можете указать: 'background-size: cover;' для него –

Обязательно очистите свои элементы! У вас есть 3 или 4 элемента 'float', все на разных вложенных уровнях, но не один' clear'. – Santi

Чтобы предотвратить переполнение содержимого, вы можете просто использовать соответствующее свойство css: overflow: hidden. Если вы это сделаете, содержимое, которое переполнено, просто отключится. В вашем примере это не будет правильным подходом.

Вместо использования max-height вы можете использовать height. Поступая таким образом, вы назначите абсолютное значение для своих элементов. Так как ваш .imagecontainer имеет свойство max-height, попробуйте заменить его height, как показано на рисунке here.

.imgcontainer { 
    float: left; 
    height: 100%; 
}

источник

2016-08-04 20:18:23 Aer0

Кажется, что это работает сначала, но как только я добавлю маржу в img, она снова переполнится. – Fzzz

Вместо этого используйте 'padding'. – Aer0

Как остановить img от переполнения?

ответ

Смежные вопросы