Изменить размер li-квадратов с помощью окна
У меня есть div полной ширины и высоты с наложением li. Ли имеют ширину 10% и высоту 20vh, чтобы уместить весь div в виде квадрата. Однако при изменении размера это не подходит для div.
Я пробовал использовать% и vh, но все еще проблема с изменением размера. Я хочу следовать дизайну следующего: - https://adictic.com/home
jQuery(function($) {
$('.squares li').mouseenter(function() {
$(this).animate({
opacity: '0.4'
});
}).mouseout(function() {
$(this).animate({
opacity: '0'
});
});
});.squares {
position: absolute;
top: 0;
z-index: 99;
left: 0;
padding: 0;
margin: 0;
width: 100%;
}
.squares li {
width: 10%;
height: 20vh;
list-style-type: none;
background: none;
float: left;
background: #ccc;
transition: 0.4s;
opacity: 0;
cursor: pointer;
}
main {
width: 100%;
height: 100vh;
background-image: url("/images/bg.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: table;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<ul class = "squares">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</main>Я не совсем уверен, чего вы пытаетесь достичь. Я сделал Codepen с вашим кодом: codepen.io/anon/pen/LMMvow
Привет, Зет, я в основном хочу следить за этой системой парящих квадратов на следующем сайте: - adictic.com/home
Connexo, я бы хотел, чтобы прямоугольник всегда был и менял размер как квадраты. В зависимости от размера экрана
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Эта проблема, возможно, неоднозначна. Реализованное решение безусловно есть. Размер браузеров можно изменять, поэтому у вас не может быть блоков, которые одновременно являются квадратными и имеют фиксированный процент ширины и высоты браузера. 20vh показывает, что вы стремитесь к 5 строкам, а 10% показывают, что вам нужно 10 столбцов. Поскольку вы не можете помешать пользователю изменять размер окна, необходимо пойти на компромисс. Если наиболее важным аспектом является сохранение квадрата, ширина и высота должны быть одинаковыми. Это дает вам возможность использовать ширину, высоту или их комбинацию в качестве единицы измерения. Несколько небольших изменений в CSS, чтобы сделать этот квадрат, используя 10vh (10% ширины области просмотра) как для ширины, так и для высоты.
jQuery(function($) {
$('.squares li').mouseenter(function() {
$(this).animate({
opacity: '0.4'
});
}).mouseout(function() {
$(this).animate({
opacity: '0'
});
});
}); .body, html {
padding: 0;
margin: 0;
}
main {
width: 100vw;
left: 0;
height: 100vh;
background: red;
position: absolute;
display: table;
}
.squares {
position: absolute;
top: 0;
z-index: 99;
left: 0;
padding: 0;
margin: 0;
width: 100%;
background: blue;
}
.squares li {
width: 10%;
height: 10vw;
list-style-type: none;
float: left;
background: none;
background: #ccc;
transition: 0.4s;
opacity: 0;
cursor: pointer;
background: orange;
}
.squares li:nth-child(10n+0) {
clear: left;
}
.squares li:nth-child(10n+10) {
right: 0;
position: absolute;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
<ul class = "squares">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</main>
Я вижу прямоугольники, а не квадраты.