Изображение проходит через прокладку тега контейнера

Я пытаюсь создать боковую панель виджета, и я сталкиваюсь с проблемами с отображаемым изображением. Боковая панель имеет прописку 20px со всех сторон, а ширина изображения установлена на авто. Однако, когда я показываю изображения, он перебирает содержимое контейнера вместо того, чтобы его размер был скорректирован для заполнения. Вот код (CSS):

aside {
 top: 0px;
 height: 100%;
 display: block;
 position: fixed;
 width: 30%;
 background: #f9f9f9;
 padding: 20px;
 border-left: 1px solid #e3e3e3;
}

img {
 border: 0;
 width: auto;
 max-width: 100%;
 height: auto;
}

*, *::before, *::after {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}

HTML:

<aside><code>&lt;div&gt;
 
 &lt;/div&gt;</code><aside> <p> Класс виджета не имеет стиля, поскольку я не реализовал его из-за этой проблемы. Вот скриншот: <a href="http://imgur.com/Gw1E0lg" rel="nofollow noreferrer" target="_blank">http://imgur.com/Gw1E0lg</a> (там, где заканчивается контейнер). Как я могу исправить эту проблему? Как увеличить ширину изображения на 20 пикселей меньше, поэтому он выравнивается с правилами CSS родителя?</p> </aside></aside>
1 ответ

Я сам нашел ответ. При использовании фиксированной позиции CSS без правильного атрибута, по крайней мере, в сафари и хроме, блок будет выравниваться с шириной родительского контейнера. Итак, если блок:

<main>
 <div>
 </div>
 <aside> 
 <div>
 
 </div>
 </aside></main>

В стороне будет выглядеть правая боковая панель, соответствующая main элементу. Но так как фиксированная ширина позиции относительна к окну, а не к родительскому, его правое положение будет в основном начинаться с экрана, а "20%" будет составлять 20% от родителя, игнорируя другую ширину. Я не знаю, почему сафари и хром отображают его таким образом, но из-за этого, и из-за того, что размер изображения на 10 пикселей меньше, чем элемент в стороне, я не мог понять, как эта проблема возможна.

Таким образом, чтобы получить то, что я хотел, я изменить в aside позицию absolute и добавил overflow-y:scroll к моему content класса в правой панели не должны двигаться. Да, я мог бы играть с шириной правого бара, но в моем проекте, что наименьшее из моих проблем прямо сейчас

licensed under cc by-sa 3.0 with attribution.