Question

请参阅： https://codepen.io/alanvkarlik/pen/vdWyrd

我迷失了。当您将鼠标悬停在粗体文本链接上时，我的网站会显示图片。

现在他们正在以原始尺寸出现，有时会超出屏幕。

我希望他们都有相同的宽度 - 比如屏幕宽度的80％。我在哪里以及如何编辑？

带有这些链接的主要区块以下列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;
}

基本上我使用这个设置来确保链接块始终位于屏幕的中心（宽度和高度）。

任何帮助将不胜感激！

Answer 1

您已使用vw单位，因此只需将其用于您的图片：

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

我还建议您从display: none;删除.hover_img span，因为这会使opacity转换无效（您可以添加pointer-events: none;取消{{1}上的任何鼠标事件及其内容）。

将图像的宽度设置为屏幕宽度的80％（多个div）

1 个答案: