具有相同宽度百分比的图像和按钮具有不同的宽度

Question

我的 HTML 文件中有这个，你可以看到图像标签和按钮标签在样式属性中具有相同的宽度 (40%)

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div style="display: flex; flex-direction: column;">
        <img src="Assets/Blimp VB.png" alt="Preview of my second attempt to make a game" width="40%" style="
        border: 2px solid black;
        border-bottom: none;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;">
                
        <button type="button" style="
          height: 100px;
          width: 40%;
          border: 2px solid black;
          border-top: none;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;"
        >2nd attempt to make a game</button>
    </div>
  </body>
</html>

当我运行文件时，我 div 看起来像这样：

为什么图片还是比标签宽？我假设宽度没有考虑到边框，但我该如何解决这个问题？

此外，我不是在推广 Blimp，我只是将其用作项目预览的占位符。

Answer 1

<div style="display: flex; flex-direction: column; width:400px;">
        <img src="Assets/Blimp VB.png" alt="Preview of my second attempt to make a game" width="100%" style="
        border: 2px solid black;
        border-bottom: none;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;">
                
        <button type="button" style="
          height: 100px;
          width: 100%;
          border: 2px solid black;
          border-top: none;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;"
        >2nd attempt to make a game</button>
</div>

试试这个代码:)

Answer 2

也许你可以这样试试？？

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div style="display: flex; 
                flex-direction: column;
                border:2px solid black;
                border-radius:20px;
                overflow:overlay;
                max-width:400px;">
        <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=49ed3252c0b2ffb49cf8b508892e452d" alt="Preview of my second attempt to make a game" width="100%" >
                
        <button type="button" 
           style="height:100px;
                  width:100%;
                  outline:0px solid;">2nd attempt to make a game</button>
    </div>
  </body>
</html>

具有相同宽度百分比的图像和按钮具有不同的宽度

Image and button with same width percentage has different width

html

css

flexbox