HTML image dimensions with a CSS border

综合技术 2018-05-18

When I use images here, I tend to give ones without any transparency a border, which is done using CSS and applied to img tags unless they have a no-border class.

Like a good web citizen, I also specify image dimensions in HTML :

“The image’s rendered size is given in the width and height attributes, which allows the user agent to allocate space for the image before it is downloaded.”

In fact my BBEdit image snippet makes it a doddle:

<p >
    <img
        src="/images/#SELECTIONORINSERTION#"
        alt=""
        
        width=
        height=
        />

But this causes a problem, which I’ve spotted in a couple of my recent posts.

If you specify the image dimensions, and use a CSS border, and have your CSS box-sizing set to border-box , then the CSS border shrinks the amount of space available to the image to its specified dimensions − 2 × the border width.

So if you specify your img dimensions to match the dimensions of the file, then the image itself will be shrunk within the element.

This animation shows this situation, and what happens when you toggle the CSS border. Watch what happens to the image itself.

(It’s got a slight offset from the text because it’s a screenshot of this blog and includes some of the background on each side.)

In contrast, this animation shows what happens when the dimensions are not specified, and so the image is free to grow when the border is applied:

Really the culprit here is box-sizing: border-box , forcing the border to remain within the size of the img element itself. This is a behaviour you actually want, as it solves the old CSS problem of juggling widths, borders and padding within a parent element. Check out MDN’s box-sizing page to see what I mean.

What are my options, then?

  • Change box-sizing.

    I’m not touching this because the potential sizing headaches are not worth it, even just for img elements.

  • Apply a border to the image files themselves.

    No, because if I change my mind about the CSS, previously posted images are stuck with the old style forever. CSS borders should also work correctly across high-density displays, whereas a 1px border in the file may not.

  • Don’t specify dimensions in the HTML.

    I don’t like the idea of making pages of this site slower to render, but I think this is the least bad option, particularly given that this site is already pretty fast .

It’s not ideal, but that BBEdit snippet is now just:

<p >
    <img
        src="/images/#SELECTIONORINSERTION#"
        alt=""
        
        />

Hey, at least it makes images quicker to include in posts!

责编内容by:Primary Unit (源链)。感谢您的支持!

您可能感兴趣的

The Ultimate Collection of 500+ CSS Generators If you are a front-end developer, I am pretty sure that you might have used CSS generators many ...
公式编辑器 – 带提示下拉框功能 – 动态获取光标位置... 引言 应开发需求,需要写一个公式编辑器插件,下面给大家讲一下实现过程。(擦汗,强作淡定,咳,开嗓~) 看图说话 本小菜开发功能前乐于先写个需求思维导图(纯属个人爱好): Ht...
What you need to know about 3D transforms in Webfl... Hi there! Today I’ll be your Webflow guide as we explore the third dimension and the opportunities t...
Moving inner div over its parents and neighbours(o... Hello guys im really new to JS and CSS, and im just testing skills in gamedevelopment... if...
前端每日实战:24# 纯 CSS 写出的层叠海浪特效... 效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/JvmBdE 可交互视...