Question

我正在用CSS悬停效果来说明问题。该菜单由3张具有这种悬停效果的图像组成，我希望它们会变小，例如有人说要调整窗口大小或使用移动设备。因此，我希望图像变小，但无法正常工作。

我尝试了一个最大高度为父div且宽度为100％的另一个div。等

<div class="projectresponsive2">
<div class="projectresponsive">

<h2 id="demo15">15. Shine</h2>
<div class="hover15 column">
  <div>
    <figure><img src="images/ux-project-buttom-web.gif" width="250px" height="598px" alt=""/> </figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="images/ux-project-buttom-web.gif" width="250px"     height="598px" alt=""/> </figure>
    <span>Hover</span>
  </div>
  <div>
    <figure><img src="images/ux-project-buttom-web.gif" width="250px" height="598px" alt=""/> </figure>
    <span>Hover</span>
  </div>
</div>


    </div>
</div>









</body>
</html>



/// CSS ////////////////////////////////////////////////////////////


.projectresponsive{
object-fit: contain;
   width: 100%;
   height: 100%;
}

.projectresponsive2{
max-height: 600px;
max-width: 1000px;
position: absolute;
}


/* Circle body css */



h1,
h1+p {
margin: 30px 15px 0;
font-weight: 300;
}
h1+p a {
color: #333;
}
h1+p a:hover {
text-decoration: none;
}
h2 {
margin: 60px 15px 0;
padding: 0;
font-weight: 300;
}
h2 span {
margin-left: 1em;
color: #aaa;
font-size: 85%;
}
.column {
    margin: 15px 15px 0;
    padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
    .column div:first-child {
    margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 250px;
height: 598px;
margin: 0;
padding: 0;
background: none;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}



/* Circle */
.hover15 figure {
position: relative;

}
.hover15 figure::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.hover15 figure:hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
0% {
    opacity: 1;
}
40% {
    opacity: 1;
}
100% {
    width: 200%;
    height: 200%;
    opacity: 0;
}
}
@keyframes circle {
0% {
    opacity: 1;
}
40% {
    opacity: 1;
}
100% {
    width: 200%;
    height: 200%;
    opacity: 0;
}
}

当我缩小网站大小时，图像会彼此堆叠。

我不确定页面上的其他div是否会有所作为。我只有一个实际起作用的幻灯片，并且以我想要此图像的方式进行响应。我不知道为什么。如果可能有干扰的话，也许我也应该在这里展示。

//// HTML-幻灯片大小的调整//////////////////////

    <div class="imageslider">


<div id="slider">
<figure>
<img src="images/amanitamuscariajpg.jpg" alt>
<img src="images/amanitamuscariajpg.jpg" alt>
<img src="images/amanitamuscariajpg.jpg" alt>
<img src="images/amanitamuscariajpg.jpg" alt>
<img src="images/amanitamuscariajpg.jpg" alt>
</figure>
</div>


</div>


<div class="meny">Home Blog Shop About Contact Portfolio</div>

///// CSS-具有大小响应并且可以/////////////

的图像

.imageslider{
max-height: 300px;
max-width: 1600px;
padding-top: 13.2%;
position: absolute;


@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

Answer 1

您的第一个问题是使用“ px”单位表示高度和宽度，要响应时，应使用相对值（％）。您可以在这里参考，这是我根据您的代码确定的代码： https://liveweave.com/Pzl0gM

滑块的第二个问题，我不知道您的问题是什么，但是我发现在这段代码中，您忘记了“ imageslider”这一段中的“}”关闭符号，因此效果不佳。希望它对您有用

Windows大小不会调整图像大小的CSS

1 个答案: