Как сохранить изображение, его отступы и отступы от боковой панели?

Question

Я не могу добавить их без изображения и его границы, выходящей за боковую панель.Вы можете понять, что я имею в виду, посетив JSFiddle https://jsfiddle.net/8p9m27an/5/

Обратите внимание, мне не разрешено изменять HTML.

Мое самое большое замешательство - как получить границу, отступы, поляи т. д. для размещения на боковой панели.Я использовал width: 100%, но я полагаю, что это только для самого изображения.Какова альтернатива, чтобы все перечисленное занимало 100% боковой панели, а не только само изображение?

Я понимаю, что могу установить width на 9x%, однако это не похоже на соответствующее решение.Я чувствую, что у CSS был бы способ «понять». Я пытаюсь привести все в соответствие и занять 100% ширины боковой панели, включая все элементы (отступы px, border px, margin px и т. Д.).

Мой текущий CSS:

CSS:

/*This is the class, .left, of the sidebar, 
which is an <aside> in the HTML. The img's are image links.*/

.left img {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
  padding: 5px;
  margin: 5px;
  background-color: #fff;*/
}

.left {
  width: 15%;
  background-color: #111;
  overflow-x: scroll; /*I know I could simply cut off overflow, but
    instead I want to have everything contained */
  float: left;
}

/*body text*/ section {
  max-width: 85%;
  background-color: rgb(0, 255, 242);
}

a {
  background-color: rgb(0, 4, 255);
  color: white;
}

body {
  padding: 1em;
  margin: 1em;
}

Мой HTML:

<main>
  <aside class = "left">
    <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/>Image 1</a>
<a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/>Image 2</a>
<a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee">Image 3</a>
</aside>
<section class = "right">
<h2>Watch your Head </h2>
<p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore in many Midwestern college towns.  Students (and people who wish they were still students) spend the few briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>
                <p>What I find much more entertaining is the large number of people who continue to play when the weather gets windy and the night sky darkens around oh....4:15pm.  The sight of frisbees boomeranging in the wind is topped only by the knowledge that even when you can't seem, those same plastic discs of death are probably hurtling through the dark night sky at 8 or 9 o'clock in the evening.
                </p>
                <p>Ultimate Frisbee requires a great deal of stamina and dexterity.  Not surprisingly, the <abbr title = "International Olympic Committee">IOC</abbr> officially recognized Ultimate as a sport in 2015.   It can go up against other sports for inclusion in  Olympic games.</p>
            </section>
        </main>

Answer 1

Вы можете использовать следующие настройки

* {box-sizing: border-box;}

чтобы граница / отступ не увеличивались в ширину, а съедали из ширины.
(https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)

Тогда

aside.left a {
    display: block;
    max-width: 100%;
}

Чтобы ссылки внутри aside не переполняли их контейнер.

Наконец

.left img{
    /* width:100%;  remove this line from your rule*/ 
    max-width: calc(100% - 10px);
}

, чтобы сделать изображения 100% их контейнера минус левый + правый поля.
(https://developer.mozilla.org/en-US/docs/Web/CSS/calc)

---

Обновленная скрипка: https://jsfiddle.net/wfhjs4ck/1/