immagine bootstrap

bersaglio

In questo tutorial, parleremo di tre classe Bootstrap 3 per aggiungere stile alle immagini. Discuteremo anche circa il Bootstrap 3 contenuto dell'immagine reattivo fornito.

Stile Generale

Prima di discutere la definizione di uno speciale stile di immagine di classe Bootstrap 3 offerte, vedremo le immagini definizione dello stile generale di bootstrap 3 offerta.

img {
  border: 0;
}

Questo è il primo regole CSS immagine definita presenti nel CSS Bootstrap 3, durante il rendering l'immagine utilizzata per rimuovere confine.

Poi, nelle query dei supporti di stampa, le disposizioni del presente regolamento.

 img {
	page-break-inside: evitare;
  }
  img {
	! Max-width: 100% importante;
  }

page-break-inside: evitare, evitare interruzioni di pagina all'interno dell'immagine.

! Max-width: 100% importante , lo stile definito immagine è evidente. Anche dove viene utilizzato per determinare la larghezza dell'immagine oltre il contenitore, può anche essere limitata al display contenitore. E 'Importante utilizzato in combinazione con altri stili per coprire eventuali danni a questo stile. A volte, gli sviluppatori vogliono lo stile migliore supporto per i dispositivi mobili amichevole rendering delle immagini, utilizzerà queste due regole speciali.

C'è anche un'altra regola per un'immagine

img {
  vertical-align: middle;
}

A causa di questa regola, l'immagine sarà centrata verticalmente nel div o di altri elementi. Come mostrato negli esempi seguenti.

Si prega di notare che se è necessario per centrare l'immagine in verticale a seconda del contesto, la necessità di altri stili.

stile speciale

Bootstrap 3 fornisce tre immagine classe con uno stile chiaro per il rendering.

img-arrotondato

È possibile utilizzare questa classe per il rendering di un'immagine con gli angoli arrotondati. Per raggiungere questo obiettivo, Bootstrap fornisce img class-arrotondato. La classe stile definito come segue

.img-arrotondato {
  border-radius: 6px;
}

Pertanto, è la proprietà border-radius a 6 con valori di pixel utilizzati per definire il relativo raccordo immagine. L'esempio seguente mostra due della stessa immagine, la prima immagine senza img class a tutto tondo, la seconda immagine con la classe img-arrotondato. Si noti che la seconda immagine è arrotondato. Si può cliccare qui per visualizzare gli esempi on-line .

IMG-thumbnail

Questo è un altro Bootstrap classe CSS 3, che si aggiungono alla immagine di una miniatura. Il codice della classe è mostrato di seguito

.img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1,428,571429 millions;
  background-color: #FFFFFF;
  border: 1px #dddddd solido;
  border-radius: 4px;
  -webkit-transizione: tutto 0.2s facilità-in-out;
		  transizione: tutto 0.2s facilità-in-out;
}

Qui è un esempio di questa classe di. Si può cliccare qui per visualizzare la demo online .

img-cerchio

Utilizzando la proprietà border-radius, Bootstrap 3 crea un'immagine circolare presentato. img-cerchio codice della classe CSS come segue

.img-cerchio {
  border-radius: 50%;
}

Clicca qui per vedere gli esempi on-line . Qui di seguito sono le immagini e il codice.

immagine responsive

Bootstrap 3 non fornisce immagini ready-responsive. È necessario aggiungere img class-sensibile per renderlo rispondente all'immagine. La classe di codice CSS seguito.

.img-reattivo {
  display: block;
  height: auto;
  max-width: 100%;
}

Definisce le immagini devono essere visualizzate come un elemento a livello di blocco, l'altezza della stessa altezza dell'immagine, la larghezza massima dell'immagine è 100%, secondo l'immagine di limitare il dispositivo a cui è presentato.

Per rendere l'immagine avere una risposta predefinita, è possibile aggiungere il codice al img CSS {}.

Esempi di utilizzo di questa classe come segue. Si può cliccare qui per visualizzare la demo online .

Questo aggiunto alla risposta immagine metodi hanno dei limiti.

Rispettivamente, nel grande schermo e dispositivi mobili (dimensioni dello schermo più piccolo può causare problemi di prestazioni) caricate immagini altrettanto grandi ad alta risoluzione. Poiché il browser verrà caricato prima di CSS e JS immagini precaricate in connessioni di rete a bassa velocità, può anche causare problemi di prestazioni. Immaginate di avere una grande immagine e un oggetto specifico all'interno di esso, quando si visualizzano le immagini su un dispositivo mobile, l'immagine verrà ridotta a una versione più piccola dell'immagine sarà così piccolo, il problema di cui direzione artistica .

Gli sviluppatori hanno escogitato soluzioni per superare queste limitazioni. Vedremo un Marc Grabanski e Christopher Schmitt Esempio HiSRC di. Questa è l'immagine crea automaticamente un basso, medio, versione ad alta risoluzione del tappo Jquery, a seconda della versione presentata dalla risoluzione dello schermo dell'immagine e larghezza di banda del dispositivo.

Dietro di noi il reattivo tutorial di immagine, discuteremo tutti questi metodi in dettaglio.

Clicca qui per vedere la demo online . Il codice è il seguente: