如何防止图像及其填充物，并避免侧边栏上溢出

Question

我无法在没有图像的情况下添加它们，并且它的边框流到侧边栏以外。您可以通过访问JSFIDDLE https://jsfiddle.net/8p9m27an/5/

来理解我的意思

请注意，我不允许更改HTML。

我最大的混乱是如何获取边框，填充，边距等以适合边栏。我使用了width: 100%，但我想这仅适用于图像本身。什么是替代方案，以便所有提到的所有侧边栏的100％，而不仅仅是图像本身？

我知道我可以将width设置为9倍，但这似乎不是适当的解决方案。我觉得CSS可以"理解"我试图使所有内容适合并占用侧边栏的宽度，包括所有元素（填充PX，边框PX，Margin PX等）。p>我当前的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;}

使边界/填充不添加到宽度，而是从宽度 eat 。
（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/