请看: https://codepen.io/alanvkarlik/pen/vdWyrd
我迷路了。当您将鼠标悬停在粗体文本链接上时,我的网站会显示图像。
现在它们以原始大小显示,有时会超出屏幕范围。
我希望它们都具有相同的宽度——比如屏幕宽度的 80%。我在哪里以及如何编辑它?
具有这些链接的主 block 以以下 div 为中心:
<div id="wrapper">
<div class="table-container">
<div id="content">
和他们的CSS:
#wrapper {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.table-container {
height:100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55%;
display:table;
text-align: center;
}
#content {
vertical-align:middle;
height:100%;
display:table-cell;
max-width:100%;
margin: 0 auto;
font-size: 3vw;
line-height: 4vw;
font-family: 'Vesper Libre', serif;
text-align: justify;
color: #fff;
}
基本上,我使用此设置来确保链接 block 始终位于屏幕中央(宽度和高度方面)。
任何帮助将不胜感激!
最佳答案
您已经在使用 vw
单位,因此只需将其用于您的图像即可:
.hover_link img {
width: 80vw;
height: auto;
}
我还建议您从 .hover_img span
中删除 display: none;
因为这将使您的 opacity
过渡无效(您可以添加 pointer-events: none;
取消 span
及其内容上的任何鼠标事件。
关于html - 将图像的宽度设置为屏幕宽度的 80%(多个 div),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48827128/