la imagen de arranque
En este capítulo, vamos a aprender el apoyo de arranque para una foto. Bootstrap ofrece tres pueden ser aplicados a la simple clase de estilo de imagen:
- .img-redondeado:Añadirla frontera de radio: 6pxpara obtener el filete de imagen.
- .img-círculo:añadirla frontera de radio: 50%para que toda la imagen se vuelve circular.
- .img-miniatura:Añadir un poco de relleno (padding) y un borde gris.
Considere los siguientes ejemplos demuestran:
Ejemplos
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-redondeado">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-circle">
<img src = "/wp-content/uploads/2014/06/download.png" class = "img-miniatura">
Trate »
Los resultados son los siguientes:
<Img> clase
Las siguientes clases están disponibles a cualquier imagen.
| categoría | descripción | Ejemplos |
|---|---|---|
| .img-redondeado | Adición de un filete de imagen (IE8 no es compatible) | probar |
| .img-círculo | La imagen se hace circular (IE8 no es compatible) | probar |
| .img-miniatura | miniaturas | probar |
| .img sensible | Imágenes de respuesta (escalará bien al elemento padre) | probar |
imagen sensible
Por etiqueta <img> para añadir la clase de apoyo imagen .img sensible para hacer el diseño de respuesta. Las imágenes se escalan bien al elemento padre.
.img sensible clase max-width: 100%; y la altura: auto; estilo se aplica en la imagen: