您可以像其他文本一样为替代文本设置样式

I like that CSS gives us plenty of opportunities to add finer details when we want them. One of those finer details is making the experience of an image not loading a little better.

我喜欢 CSS 给我们提供了很多机会来添加更细致的细节。那些更细致的细节之一是让图像不加载的体验稍微好一些。

The alt text is surfaced on the page when an image fails to load. It’s yet another reason to write good alt text and really hone your skills in creating a user-focused experience by being descriptive.

当图像加载失败时，alt 文本会在页面上显示。这又是一个理由去写好 alt 文本，并真正磨练你的技能，通过描述性来创造以用户为中心的体验。

The demo doesn’t look great though, does it? I suppose the fact we’re rolling default user agent styles isn’t helping, so let’s introduce the styles from ‌Some simple ways to make content look good.

不过，演示看起来并不好，是吗？我想我们使用默认用户代理样式的事实并没有帮助，所以让我们引入来自 一些简单的方法来使内容看起来更好 的样式。

Ok, looking better. Let’s directly target our alt text though — well, our <img> elements. By styling the <img> element, our alt text will have those styles applied because it is an attribute of the <img>.

好吧，看起来更好。不过，让我们直接针对我们的 alt 文本 — 好吧，我们的 <img> 元素。通过为 <img> 元素设置样式，我们的 alt 文本将应用这些样式，因为它是 <img> 的一个属性。

img { display: block; max-width: 100%; font-style: italic; font-size: var(--size-step-1); line-height: 1.5; text-wrap: balance; }

I’m making the <img> a block element here because I want to make sure the it fills its parent. This approach gets rid of that annoying bit of whitespace at the bottom of the <img> too.

我在这里将 <img> 设为块元素，因为我想确保它填满其父元素。这种方法也消除了 <img> 底部恼人的空白部分。

By applying max-width: 100% we’re also ensuring that if a large image is loaded, it won’t blow out of the confines of its parent.

通过应用 max-width: 100%，我们还确保如果加载了大图像，它不会超出其父元素的范围。

The fun part though, is the text related styles. I’ve opted to present alt text with an italicised look and feel. I’ve also knocked it up a step on the fluid type scale. I’ve set a sensible line-height and finally, I’ve told the browser to attempt to visually balance the text, u...