Изображения не изменят размер, когда размер окна | CSS - PullRequest
Новая
       43

Изображения не изменят размер, когда размер окна | CSS

0 голосов
/ 23 января 2019

Я создаю меню с эффектом парения CSS. Меню состоит из 3 изображений с этим эффектом наведения, и я хочу, чтобы они уменьшались, когда кто-то говорит изменить размер окна или использует мобильный телефон, например. Поэтому я хочу, чтобы изображения стали меньше, но я не могу заставить их работать.

Я пробовал разные вещи с родительским div с максимальной высотой и другим div с шириной: 100%; и т.д. 

<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; 
}

1 Ответ

0 голосов
/ 23 января 2019

Ваша первая проблема - использовать единицы измерения «px» для высоты и ширины, вы должны использовать относительные значения, такие как (%), когда вы хотите быть отзывчивым. Вы можете сослаться здесь, это код, который я зафиксировал в вашем коде: https://liveweave.com/Pzl0gM

Вторая проблема с ползунком, я не знаю, в чем ваша проблема, но я обнаружил, что в этом коде вы забыли знак закрытия "}" в этом абзаце "imageslider", поэтому он не работает хорошо , Надеюсь, что это полезно с вами

...