la imagen de arranque

objetivo

En este tutorial, vamos a discutir tres clases Bootstrap 3 para añadir estilo a las imágenes. También vamos a discutir sobre el contenido Bootstrap 3 imagen sensible proporcionada.

Estilo general

Antes de discutir la definición de un estilo de imagen especial clase Bootstrap 3 ofertas, vamos a ver las imágenes de definición de estilo en general Bootstrap 3 oferta.

img {
  border: 0;
}

Se trata de las primeras reglas CSS imagen definida que se encuentran en el CSS 3 Manos a la Obra, al visualizarse la imagen utilizada para eliminar frontera.

Luego, en las preguntas de los medios de impresión, las disposiciones del presente reglamento.

 img {
	page-break-interior: evitar;
  }
  img {
	! Max-width: 100% importante;
  }

page-break-inside: evitar, evitar saltos de página dentro de la imagen.

! Max-width: 100% importante ; el estilo definido imagen es obvia. Incluso cuando se utiliza para determinar el ancho de la imagen más allá del recipiente, también puede estar limitada a la pantalla recipiente. Es Importante utiliza en conjunción con otros estilos para cubrir cualquier daño a este estilo. A veces, los desarrolladores quieren el estilo mejor soporte para dispositivos móviles de usar el procesamiento de imágenes, se utilizan estas dos reglas especiales.

También hay otra regla para una imagen

img {
  vertical-align: media;
}

Debido a esta regla, la imagen se centra verticalmente en el div u otros elementos. Como se muestra en los siguientes ejemplos.

Tenga en cuenta que si usted necesita para centrar la imagen verticalmente, dependiendo del contexto, la necesidad de estilos adicionales.

estilo especial

Bootstrap 3 proporciona tres imágenes clase con un estilo claro para la representación.

img-redondeado

Puede utilizar esta clase para representar una imagen con esquinas redondeadas. Para lograr esto, Bootstrap ofrece clase img-redondeado. La clase de estilo definido de la siguiente manera

.img-redondeado {
  la frontera de radio: 6px;
}

Por lo tanto, es la propiedad de la frontera de radio a 6 con valores de píxeles utilizados para definir el filete imagen relevante. El siguiente ejemplo muestra dos de la misma imagen, la primera imagen sin img class-redondeada, la segunda imagen con la clase img-redondeada. Tenga en cuenta que la segunda imagen es redondeada. Puede hacer clic aquí para ver los ejemplos en línea .

img-miniatura

Esta es otra clase CSS 3 Bootstrap, que se suman a la imagen de una miniatura. El código de clase se muestra a continuación

.img-miniatura {
  display: inline-block;
  altura: auto;
  max-width: 100%;
  padding: 4 píxeles;
  line-height: 1.428571429;
  background-color: #ffffff;
  frontera: #dddddd sólido 1px;
  la frontera de radio: 4 píxeles;
  -webkit-transición: toda facilidad 0.2s-in-out;
		  transición: toda facilidad 0.2s-in-out;
}

Este es un ejemplo de esta clase de. Puede hacer clic aquí para ver la demostración en línea .

img-círculo

Mediante el uso de la propiedad border-radius, Bootstrap 3 crea una imagen circular presentada. img-círculo código CSS clase como sigue

.img-círculo {
  la frontera de radio: 50%;
}

Haga clic aquí para ver los ejemplos en línea . A continuación se presentan las capturas de pantalla y código.

imagen sensible

Bootstrap 3 no proporciona imágenes listas que responden. Debe añadir img class-sensible a hacer que responda a la imagen. La clase de código CSS a continuación.

.img sensible {
  display: block;
  altura: auto;
  max-width: 100%;
}

Define las imágenes deben ser muestran como un elemento en bloque, la altura de la misma altura de la imagen, la anchura máxima de la imagen es de 100%, de acuerdo a la imagen para limitar el dispositivo al que se presenta.

Para hacer que la imagen que tiene una respuesta predeterminada, puede agregar el código a la CSS img {}.

Ejemplos del uso de esta clase de la siguiente manera. Puede hacer clic aquí para ver la demostración en línea .

Esto, añadido a la respuesta de la imagen métodos tienen limitaciones.

Respectivamente, en la gran pantalla y dispositivos móviles (tamaño de pantalla más pequeña puede causar problemas de rendimiento) cargados igualmente grandes imágenes de alta resolución. Debido a que el navegador se cargará antes de CSS y JS imágenes precargadas en unas conexiones de red de baja velocidad, sino que también puede causar problemas de rendimiento. Imagine que tiene una gran imagen y un objeto específico dentro de él, al ver las imágenes en un dispositivo móvil, la imagen se reducirá a una versión más pequeña de la imagen se verá tan pequeño, el problema se refiere a la dirección de arte .

Los desarrolladores han llegado con soluciones para superar estas limitaciones. Vamos a ver un Marc Grabanski y Christopher Schmitt Ejemplo de HiSRC. Esta es una imagen crea automáticamente un medio, versión de baja y de alta resolución de la clavija Jquery, dependiendo de la versión presentada por la resolución de pantalla de imagen y ancho de banda del dispositivo.

Detrás de nosotros el tutorial imagen sensible, vamos a discutir todos estos métodos en detalle.

Haga clic aquí para ver la demostración en línea . Código es el siguiente: