我有以下css和html,我正在尝试让<div>
跟随<img>
继承 width 和 height <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;
}
答案 0 :(得分:4)
您可以将内部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>