[Risolto] Problema adattamento immagini

[debby_]

Ciao, inizio questo mio primo topic con un grande ringraziamento a tutti voi del forum; è grazie alle vostre risposte che ho risolto diversi problemucci. Quindi grazie.

Spero che sappiate dare una risposta anche a quanto sto per chiedervi:

se nelle opzioni layout, metto come impostazione n. colonne 2, le immagini che ho utilizzato negli articoli appaiono sovrapposte (come nell'immagine che allego). Come posso fare perchè vengano adattate automaticamente, come avviene con il testo dell'articolo?

Se può essere un'informazione utile, il mio tamplate è td-okini.

[allegato eliminato automaticamente dopo un anno]

[rezor]

Alla grezza, scrivi una regola css; trova la classe del contenitore del blog (es. <div class="blog columns-2">); quindi scrivi la regola:

Codice: [Seleziona]

.blog.columns-2 img {
  max-width:90%;
}

[debby_]

Grazie rezor per aver risposto.

Riporto una parte del codice originale che ho nel css del template:

.cols-1 {
  display: block;
  float: none !important;
  margin: 0 !important;
}


.cols-2 .column-1 {
  width:48%;
  float:left;

}

.cols-2 .column-2 {
  width:48%;
  float:right;
  margin:0
}


aggiungendo la scritta da te indicata (con il 90%) non cambia nulla, se invece metto 48%, le immagini non vengono adattate al paragrafo, ma il paragrafo viene abbassato, come si vede dall'immagine che allego.


il codice l'ho cambiato così:

.cols-1 {
  display: block;
  float: none !important;
  margin: 0 !important;
}


.cols-2 .column-1 {
  width:48%;
  float:left;
  .blog.columns-2 img {
  max-width:48%;
}

}


.cols-2 .column-2 {
  width:48%;
  float:right;
  margin:0
    .blog.columns-2 img {
  max-width:45%;
}
}

In ogni caso non sono riuscita ad adattare le immagini.. magari ho aggiunto quella parte di codice nella parte sbagliata..


[allegato eliminato automaticamente dopo un anno]

[rezor]

esatto.
il css non supporta l'incapsulamento o "nesting".

prova così:  aggiungi questa regola fuori dalle altre; per riferimento ti riporto anche l'ultima tua così capisci meglio dove metterla:_

Codice: [Seleziona]

.cols-2 .column-2 {
  width:48%;
  float:right;
  margin:0
} /*fine del tuo codice*/

.cols-2 .column-1 img,
.cols-2 .column-2 img {
  max-width:90%;
}
(in sostanza gli stiamo dicendo: se il blog è a due colonne; prendi tutte le immagini all'interno della colonna uno e della colonna due, e limitane la larghezza al 90% ; il 90% fa riferimento al contenitore; se vuoi vedere esattamente a chi sta applicando le dimensioni puoi aggiungere un

Codice: [Seleziona]

border: 1px dashed red;
così vedi chiaramente le immagini con il tratteggio rosso sono quelle che hai "beccato" con la regola css.  Una regola più generica potrebbe usaare il selettore

Codice: [Seleziona]

.cols-2  img , di fatto ignorando il fatto che si tratti della prima o della seconda colonna.

Visto che i contenitori usano float, non è detto che la dimensione percentuale venga rispettata; se il test del "border" è positivo ovvero  vedi il bordo tratteggiato, ma le immagini non vengono ridimensionate, prova a mettere un max-width:200px (usando il numero di pixel giusti, fai qualche prova con gli strumenti di analisi del tuo browser).

[debby_]

Immagine adattate alla perfezione!!!

Grazieeeeeeeeeeeeeeeeee!!!!!!!!