html - 将图像的宽度设置为屏幕宽度的 80%(多个 div)

Question

请看: 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 始终位于屏幕中央(宽度和高度方面)。

任何帮助将不胜感激!

Answer 1

您已经在使用 vw 单位，因此只需将其用于您的图像即可:

.hover_link img {
  width: 80vw;
  height: auto;
}

我还建议您从 .hover_img span 中删除 display: none; 因为这将使您的 opacity 过渡无效(您可以添加 pointer-events: none; 取消 span 及其内容上的任何鼠标事件。