Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 21
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797

    immagine cover in una colonna flex

    Sto seguendo un facile tutorial per due colonne con flex, e nella prima colonna sto mettendo una immagine. Per� vorrei ottenere il risultato di un tutorial un po' pi� complesso, ovvero che l'imagine sia background-size:cover ma il problema � che l'immagine � dinamica e mostrata da uno shortcode.
    Dov� il trucco?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,679
    il problema � che l'immagine � dinamica e mostrata da uno shortcode
    Cioè? è inserita tramite tag <img>? Intendi questo?

    In tal caso il background-size:cover potrebbe servire a poco. Dovresti usare invece object-fit:cover.

    Se non è ciò che intendi, prova a chiarire.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    ho dimenticato di inserire un minimo di html.. l'immagine è con uno shortcode
    <div class="....">[image]</div>

    Ho anche provato object-fit, ma invano

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,679
    ok ma "shortcode" significa ben poco nel contesto HTML. Gli shortcode sono elaborati lato server e producono il markup HTML che sarà dato in pasto al browser, lato client.

    Quindi, arrivando al dunque, cosa ti salta fuori nella pagina HTML, analizzandola dal browser?
    Hai un tag <img>????

    In tal caso object-fit è la strada giusta da percorrere ma chiaramente va applicato in modo corretto.

    Se questo è il tuo caso e non hai risolto, allora presumo tu lo stia applicando nella maniera sbagliata.

    Magari prova a mostrare il codice e specificare ciò che hai fatto.
    Ultima modifica di KillerWorm; 09-06-2022 a 22:14
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    ...iniziando dal risultato, a questa pagina se clicki su un evento, si apre un popup, che è quello che intendo modificare. Si, mi salta fuori un <img> tag.
    Ma per ora mi sono limitato ad un CSS/HTML minimale (tralascio i tag del testo e del modal):

    codice:
    .calmodal-flex-container {  display:flex; flex-wrap:wrap; flex-direction:row; text-align:center;}
    .calmodalflex-item-left, .calmodalflex-item-right { flex:50%; }
    @media (max-width: 800px) {  .calmodalflex-item-right, .calmodalflex-item-left { flex:100%;  }}
    codice HTML:
    <div class="calmodal-flex-container">
      <div class="calmodalflex-item-left">[post_image]</div>
      <div class="calmodalflex-item-right"> ...the texts...  </div>
    </div>
    Ultima modifica di stardom; 09-06-2022 a 22:33

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,679
    bene, ma mi aspettavo di vedere object-fit:cover da qualche parte. Non lo hai applicato?!
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    bene, ma mi aspettavo di vedere object-fit:cover da qualche parte. Non lo hai applicato?!
    sto provando a farlo dall'inspector, ma non vedendo risultati immagino che, appunto, lo sto applicando nel posto sbagliato

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,679
    ok ma giusto per chiarezza, io so esattamente dove va messo, e se non lo so ci arrivo comunque. Perdonami se magari posso apparire presuntuoso ma, dal momento che interessa a te capire come risolvere, sarebbe bene che tu indicassi cosa esattamente hai provato a fare, dove hai applicato quella proprietà e in che modo.

    A quel punto posso indicarti con maggiore precisione cosa è andato storto e come poter aggiustare il tiro, così che la discussione possa intanto risultare utile anche per eventuali altri utenti che magari si trovano ad affrontare tale problematica con le stesse tue difficoltà di applicazione, e sia comunque più utile a te comprendere dove stava il problema, così magari, afferrato il concetto, è più facile che ti resti impresso il metodo corretto da seguire, anche per eventuali future occasioni.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    797
    ....certo, molti come me sono qui per imparare, non solo chiedere.

    Dall'inspector ho provato ad aggiungere object-fit all'elemento img, ma in quel caso mi va a modificare altri img dell'intero sito... quindi questa opzione era da scartare.
    Ho provato sul div della colonna, e niente.
    Non ho altri elementi, l'html è fatta solo dai sopra citati.

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,679
    ok, partiamo dal fatto che object-fit:cover in questo caso va applicato all'elemento img. Tale elemento puoi comunque selezionarlo in svariati modi, a questo punto il problema sta principalmente nel costruire meglio il selettore CSS per "raggiungere" solo quell'elemento.

    Puoi agire in due modi:
    - cercare di capire se è possibile utilizzare eventuali classi o id che sono già disponibili negli elementi HTML di quel contesto;
    - oppure, se puoi modificare il codice HTML, applicare tu stesso un id o una classe per poter identificare quell'elemento in maniera più precisa attraverso un selettore CSS più specifico.

    Nel secondo caso, dal codice che hai postato inizialmente, deduco che tu possa agire sull'HTML dell'elemento contenitore di quell'immagine.
    Questo può essere sufficiente per aggiungere una tua classe.

    Potresti quindi impostare la cosa in questo modo:
    codice:
    <div class="content-fit-img">[image]</div>
    A questo punto puoi costruire un selettore del genere per raggiungere l'immagine dentro quel contenitore:
    codice:
    .content-fit-img img {
       /* ... */
    }
    Magari dammi conferma prima di proseguire
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.