我试图弄清楚如何实现以下目标。
我有一个img标签，它有一个给定的width，最初不包含src。它还有一个 2px 的黑色边框。
我想给它一个我可以指定的初始高度，但是height:auto一旦 asrc被分配（通过文件input），它就会切换到。
这可以仅使用 html 和 css 吗？
此 CSS 将根据 img 元素是否设置了 src 来调整包含 div 的高度。
它首先将 img 设置为所需的宽度和高度。然后，如果有一个 src 属性，它会将高度更改为自动。然后，如果 src 属性为空，它将高度设置为所需的默认值。
.container {
padding: 20px;
background: pink;
position: relative;
display: inline-block;
}
img {
height: 100px;
width: 200px;
}
img[src] {
height: auto;
border: solid 2px black;
}
img[src=""] {
height: 100px;
border: none;
}<p>The container div is pink</p>
<p>There is no src in the img element</p>
<div class="container">
<img/>
</div>
<p>src in img element is set</p>
<div class="container">
<img src="https://picsum.photos/id/1015/200/300" />
</div>
<p>There is an empty src in img element</p>
<div class="container">
<img src="" />
</div>容器 div 被赋予了一些填充，所以它可以在这个演示的 img 后面看到。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句