我有以下 css 和 html,我正在尝试获取我的 <div>
以下 <img>
继承 <img>
的宽度和高度 .以下<div>
是为了覆盖。 <div>
有办法吗?获取 <img>
的真实宽度和高度 ?
我还没有尝试过 javascript,更愿意纯粹使用 CSS,但如果必须的话,我会使用 javascript。我根本不使用 jQuery,也不打算使用。
HTML
<div class="div_1">
<div><img src=""/><div></div></div>
<div><img src=""/><div></div></div>
....
</div>
CSS
.div_1 > div {
float: left;
margin: 8px;
}
.div_1 > div > img {
height: 300px;
width: auto;
}
.div_1 > div > div {
width: .div_1.div.img.width;
height: .div_1.div.img.height;
}
最佳答案
您可以通过将内部 div
的位置设置为 absolute
并将外部的位置设置为 relative
来做到这一点:
.div_1 > div {
float: left;
margin: 8px;
position: relative;
}
.div_1 > div > img {
height: 300px;
width: auto;
display: block; /* remove default spacing from bottom of <img> */
}
.div_1 > div > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 0, 0, 0.5);
}
/* Not necessary... */
.div_1 > div > div:after {
content: "Ummmmm, bacon!";
color: #FFF;
font-size: 30px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="div_1">
<div>
<img src="http://baconmockup.com/200/200" />
<div></div>
</div>
<div>
<img src="http://baconmockup.com/200/200" />
<div></div>
</div>
</div>
关于javascript - 将 css 设置为父子大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37822804/