我需要显示一个图像库,在每个图像上我都有一个图标和一个数字。
这些元素位于覆盖 DIV 中,该 DIV 在鼠标结束时显示。
我正在尝试做两件事:
-
投票div 应在叠加div 内垂直对齐;
-
我希望心形字体大小根据图像宽度进行调整。
这两个问题能解决吗?
我的代码和 JSFiddle 示例:
<div class="gallery">
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
<div class="image">
<img src="http://placehold.it/600x600" alt="" />
<div class="overlay">
<div class="vote">
<a href="#"><i class="fa fa-heart"></i></a>
<span>350</span>
</div>
</div>
</div>
</div>
* {
-webkit-box-sizing: box-model;
-moz-box-sizing: box-model;
box-sizing: box-model;
}
*:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.gallery {
overflow: hidden;
}
.image {
position: relative;
text-align: center;
float: left;
width: 100%;
}
@media screen and (min-width: 600px) {
.image {
width: 50%;
}
}
img {
display: block;
height: auto;
max-width: 100%;
outline: 0;
}
.overlay {
background-color: #404040;
color: #FFFFFF;
display: none;
height: 100%;
font-size: 0.75rem;
padding: 4px;
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
}
.image:hover .overlay {
display: block;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
-webkit-opacity: 0.8;
opacity: 0.8;
}
.vote {
}
.vote a {
text-decoration: none;
}
.vote i {
color: red;
display: block;
line-height: 1.0;
font-size: 8rem;
}
.vote span {
display: block;
font-size: 2rem;
}
像这样将vote
类居中:
.vote {
position: relative;
top: 50%;
transform: translateY(-50%)
}
请参阅 http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/了解其工作原理。
缩放字体更棘手,因为您使用的是 font-awesome。 我不认为你可以用CSS做到这一点。
下面是一个 JavaScript 解决方案,它将字体大小设置为每个图像高度的 30%:
var images= document.querySelectorAll('.image');
for(var i = 0 ; i < images.length ; i++) {
var height= images[i].offsetHeight;
var heart= images[i].querySelector('.fa');
var span= images[i].querySelector('span');
heart.style.fontSize= span.style.fontSize= (height*0.3)+'px';
}
小提琴
好的,#1 很简单:有多种可能的解决方案。实际上,前段时间在互联网上是一篇非常好的广泛文章:使用CSS进行垂直居中
或者,您可以使用像flexbox这样的现代解决方案:
<div class="wrapper">
<div>
Centered vertically and horizontally
</div>
</div>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
请记住在需要时包含前缀版本,并在部署之前检查 caniuse.com 以查看哪些浏览器不支持此解决方案。
至于#2:花了我相当长的时间才发现它实际上比我想象的要容易得多:
.vote {
font-size: 30vw;
}
@media screen and (min-width: 600px) {
.vote {
font-size:15vw;
}
}
根据自己的喜好调整值。再次:并非所有浏览器都完全支持视口单元(咳IE咳),请检查caniuse。我刚才手边没有IE的副本,但我认为应该支持vw,所以我在这里看不到任何问题。请记住,iOS上的Safari做了一些奇怪的事情,尽管据我所知,这只影响vh而不是vw。