Ciao a tutti!
Sto realizzando un sito web dinamico per un progetto universitario. Sono bloccata nella homepage, in cui ho inserito varie icone circolari disposte a loro volta a formare un cerchio.
Il problema che non riesco a risolvere è di adattare il tutto in base alla grandezza della finestra web. O meglio, quando ho la pagina web a tutto schermo va tutto ok, se poi però diminuisco la grandezza della finestra le mie icone vengono tagliate. Io vorrei invece che diventassero più piccole adattandosi alla grandezza della pagina. Come posso fare?
Ecco il mio codice HTML relativo a questo problema:
<div class="card">
<div class="card2">
<ul id="list">
</ul>
</div>
</div>
<script type="text/javascript" src="prova.js"></script>
Ecco il codice CSS:
#list{
display: flex;
background-color:transparent;
height: 1300px;
width: 1300px;
border-radius: 50%;
}
.list-item{
background-color: transparent;
list-style: none;
position: absolute;
width: 300px;
height: 300px;
top:39.5%;
right: 41.5%;
}
.card {
display: flex;
overflow:hidden;
border-color: yellow;
border-radius: 50%;
background-color:transparent;
bottom:700px;
margin: 0 auto;
}
.card2 {
display: flex;
overflow:hidden;
border-color: yellow;
border-radius: 50%;
background-color:transparent;
bottom:700px;
margin: 0 auto;
}
.card-icone {
display: flex;
overflow:hidden;
border-color: yellow;
background-color:darkorange;
border-radius: 50%;
bottom:700px;
}
img {
max-width: 100%;
}
Ed ecco il codice JS:
var list = $("#list");
var updateLayout = function(listItems){
for(var i = 0; i < listItems.length; i ++){
var offsetAngle = 360 / listItems.length;
var rotateAngle = offsetAngle * i;
$(listItems[i]).css("transform", "rotate(" + rotateAngle + "deg) translate(0, -470px) rotate(-" + rotateAngle + "deg)")
};
};
var x="<div class='card2'><li class='list-item'><img type='buttom' id='click-area' class='card-icone' src='/icone/add.png'></li></div>";
var y="<div class='card2'><li class='list-item'><img class='card-icone' src='/icone/medication.png'></li></div>";
var z="<div class='card2'><li class='list-item'><img class='card-icone' src='/icone/book.png'></li></div>";
var k="<div class='card2'><li class='list-item'><img class='card-icone' src='/icone/skincare.png'></li></div>";
list.append(x);
list.append(y);
list.append(z);
list.append(k);
var listItems=$(".list-item");
updateLayout(listItems);
$(document).on("click", "#click-area", function(){
var listItem =
$("<div class='card2'><li class='list-item'><img class='card-icone' src='/icone/new.png'></li></div>");
list.append(listItem);
var listItems = $(".list-item");
updateLayout(listItems);
});