Adattare gli oggetti alla grandezza della pagina

di il
4 risposte

Adattare gli oggetti alla grandezza della pagina

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

});

4 Risposte

  • Re: Adattare gli oggetti alla grandezza della pagina

    Io mi affido in genere a una funzionalità simile a quella che chiedi e disponibile nel framework Bootstrap, che consente di .

    A meno di non voler adottare questo framework per lo sviluppo del sito, prova a dare un'occhiata al suo sorgente per vedere come viene gestito l'attributo img-fluid sulle immagini per consentire di adattarle allo spazio disponibile sulla pagina.

    Ciao!
  • Re: Adattare gli oggetti alla grandezza della pagina

    Come posso applicare img-fluid nel mio caso? Ho provato ad aggiungerlo dove carico le immagini ovvero nel file JS ma non funziona, spariscono proprio le icone
  • Re: Adattare gli oggetti alla grandezza della pagina

    GattoFelice ha scritto:


    Come posso applicare img-fluid nel mio caso? Ho provato ad aggiungerlo dove carico le immagini ovvero nel file JS ma non funziona, spariscono proprio le icone
    Se intendi applicare quell'attributo, devi aggiungere il framework Boostrap ai fogli di stile caricati dalla pagina.

    Se prendi solo quella classe, mancano le restanti definizioni di stile e quindi potresti averne omesse alcune che sono fondamentali per una corretta visualizzazione (ad esempio, definizioni che riguardano il tag <img /> in quanto tale, o altri stili correlati).
  • Re: Adattare gli oggetti alla grandezza della pagina

    Se si tratta di adattare delle immagini alla grandezza della finestra del browser, non è necessario scomodare Bootstrap.
    Per meglio dire, puoi anche utilizzare Bootstrap, ma la questione è talmente semplice da risolvere con CSS che sarebbe il caso di applicare una classe CSS a mano, almeno si impara qualcosina...

    Esempio classe CSS:
    
    .centra_immagine {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 80%;
        max-height: 80%;
        z-index: -1;
    }
    
    mentre da HTML potresti richiamare l'immagine cosi:
    
    <body>
        <img class="centra_immagine" src="esempio_immagine.png"/>
    </body>
    
    vedrai che l'immagine si adatta su qualsiasi dispositivo.
    In pratica avrai un'immagine flex perfettamente centrata sullo schermo, qualsiasi sia la sua grandezza.
Devi accedere o registrarti per scrivere nel forum
4 risposte