css - 如何防止图像及其填充和边距溢出侧边栏？

Question

如果图像及其边框超出侧边栏，我无法添加这些。您可以通过访问 JSFiddle https://jsfiddle.net/8p9m27an/5/ 了解我的意思。

请注意，我不能更改 HTML。

我最大的困惑是如何让边框、填充、边距等适合侧边栏。我使用了 width: 100%，但我想这只是针对图像本身。有什么替代方案可以让所有提到的内容都占据侧边栏的 100%，而不仅仅是图像本身？

我知道我可以将 width 设置为 9x%，但这似乎不是合适的解决方案。我觉得 CSS 会有一种方法来“理解”我正在尝试让所有内容都适合并占据侧边栏的 100% 宽度，包括所有元素(填充 px、边框 px、边距 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 )

---

更新 fiddle :https://jsfiddle.net/wfhjs4ck/1/