css - 使用CSS放大图像周围的<p>标签边框和背景

Question

是否可以使用 css 增加大图像周围的段落边框和背景？ 我必须放大框的大小，而不是缩放图像。

我的 css 在单独的文件中，我不想触及 html 代码。那么是否可以通过编辑仅 css 来做到这一点？

例子如下:

大家可以发现“Big Image Test”框要大一些。以下是异常结果的示例:

现在只需添加 <br> 即可完成-标签。是否可以只使用 css 来做到这一点。

这是我的 css 文件的一部分:

p {
    background-color: #CCC;
    border: 2px solid black;
    text-align: left;
    padding: 5%;
 }

p img {
    float: right;
    clear: right;
    padding: 5px;
    margin-right: 0px;
    border: 0.5em groove white;
}

这里是“ block ”的 html 代码:

<h3>Big Image Test</h2>
<p>
    I have a BIG image
    <img width="500" height="500" src="qr.png" alt="image"/>
</p>

Answer 1

将 p 标签的 css 更改为:

p {
    background-color: #CCC;
    border: 2px solid black;
    text-align: left;
    padding: 5%;
    overflow:hidden;
 }

这对我来说有点违反直觉，我偶然发现它并不期望它在尝试解决这个问题时起作用，但它似乎起作用了...... 有人可以解释为什么将溢出指定为隐藏行为是这样的吗？!

参见 fiddle