Immagini reattive con CSS

Sto trovando difficile ridimensionare le immagini per renderle reattive.

Sto sviluppando un’applicazione php per convertire automaticamente un sito Web in una versione retriggers. Sono un po ‘bloccato sulle immagini.

Ho aggiunto con successo una class wrapper a ogni immagine su un sito Web e posso ridimensionare le immagini abbastanza bene.

Il mio problema sta nelle immagini che sono naturalmente più piccole della finestra, come logo e icone. Non voglio ridimensionarli.

Il mio codice attualmente converte:

 

in:

 

Dove utilizzo il seguente CSS:

 .erb-image-wrapper{ max-width:90%; height:auto; position: relative; display:block; margin:0 auto; } .erb-image-wrapper img{ width:100% !important; height:100% !important; display:block; } 

Questo ridimensiona tutte le immagini, ma voglio solo ridimensionare le immagini che sono oltre la larghezza della pagina. È il modo in cui posso raggiungere questo tramite CSS?

 .erb-image-wrapper img{ max-width:100% !important; height:auto; display:block; } 

Ha funzionato per me
Grazie a MrMisterMan per il suo aiuto.

Usa anche la max-width delle immagini. Modificare:

 .erb-image-wrapper img{ width:100% !important; height:100% !important; display:block; } 

a…

 .erb-image-wrapper img{ max-width:100% !important; max-height:100% !important; display:block; } 

controlla le immagini prima con php se è piccolo, quindi la dimensione standerd per il logo gli fornisce qualsiasi altra class css e non cambia le sue dimensioni

penso che devi scrivere script in mezzo

um reattivo è semplice

  • prima di tutto creare una class chiamata cella dargli la proprietà di display:table-cell
  • then @ max-width:700px do {display:block; width:100%; clear:both} {display:block; width:100%; clear:both}

e non è mai stato un assoluto assoluto; divs deve essere al 100% quindi max-width: - desired width - per inquadratura interna. Un vero sito reattivo ha meno di 9 righe di css tutto ciò che è passato in un mondo di merda e di cose complicate.

PS: i fogli di stile reset.css sono ciò che rende ciechi css c’era una ragione logica per cui hanno dato gli stili di default in primo luogo.

il modo migliore che ho trovato è stato quello di impostare l’immagine che si desidera visualizzare in modo reattivo come immagine di sfondo e ha inviato una proprietà css per il div come copertura.

 background-image : url('YOUR URL'); background-size : cover 

Usa la larghezza massima e l’altezza automatica e visualizza l’immagine come blocco come segue:

 image { max-width:100%; height: auto; display:block; } 

corpo

{background-image: url (” http://sofit.miximages.com/css/vijay-story_647_062216110217.jpg “); background-size: 100vw 100vh; background-repeat: no-repeat; ; }