Al diseño web - Foto
Utilice el atributo de ancho
Si el atributo de anchura se establece en 100%, la imagen se realiza de acuerdo con la gama superior e inferior de las funciones de respuesta:
Tenga en cuenta que en el ejemplo anterior, la imagen será más grande que su imagen original. Podemos utilizar max-anchura de atributos de una buena solución a este problema.
El uso de ancho máximo de propiedad
Si la propiedad max-anchura se establece en 100%, el cuadro no será más grande que su tamaño original:
Añadir páginas de imágenes
imagen de fondo
imagen de fondo puede responder a cambiar el tamaño o el zoom.
Los siguientes son tres métodos diferentes:
1. Si la propiedad background-tamaño se ajusta a "contener", la imagen de fondo será adaptativo relación de área de contenido. Fotos mantienen sin cambios sus proporciones:
Este es el código CSS:
Ejemplos
width: 100%;
altura: 400px;
Imagen de fondo: url ( 'img_flowers.jpg ');
background-repeat: no-repeat;
fondo-size: contener;
frontera: 1px solid rojo;
}
Trate »
2. Si la propiedad background-size se establece en "100% 100%", la imagen de fondo se ampliará para cubrir toda la región:
Ejemplos
Este es el código CSS:
width: 100%;
altura: 400px;
Imagen de fondo: url ( 'img_flowers.jpg ');
fondo-size: 100% 100% ;
frontera: 1px solid rojo;
}
Trate »
3. Si la propiedad background-tamaño se ajusta a "cubrir", la imagen de fondo se expande para ser lo suficientemente grande como para cubrir completamente el fondo de modo que el área de la imagen de fondo. Tenga en cuenta que la propiedad sigue siendo las proporciones de la imagen para que alguna parte de la imagen de fondo no se pueden visualizar en la zona de posicionamiento de fondo.
Este es el código CSS:
Ejemplos
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Trate »
Los distintos dispositivos muestran una imagen diferente
Las imágenes grandes se pueden visualizar en la pantalla grande, pero no se muestran así en la pequeña pantalla. No necesitamos para cargar la pequeña pantalla en el cuadro grande, por lo que está afectando a la velocidad de carga. Así que podemos utilizar preguntas de los medios, en función del dispositivo para mostrar una imagen diferente.
El siguiente cuadro grande y pequeña imagen se mostrarán en diferentes dispositivos:
Ejemplos
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
Trate »
Puede utilizar las consultas de medios min-dispositivo de ancho sustituto min-width, el sistema lo detectará la anchura del dispositivo en lugar del ancho del navegador. Restablecer el tamaño del navegador, tamaño de la imagen no cambia.
Ejemplos
body {
Imagen de fondo: url ( 'img_smallflower.jpg ');
}
/ * El dispositivo más grande que 400 píxeles (también igual a): * /
@media única pantalla y (min-dispositivo -width: 400px) {
body {
Imagen de fondo: url ( 'img_flowers.jpg ');
}
}
Trate »
<Imagen> elemento HTML5
de HTML5 <picture> elemento se puede configurar de varias imágenes.
Soporte para el navegador
| elemento | |||||
|---|---|---|---|---|---|
| <Imagen> | No es compatible | 38.0 | 38.0 | No es compatible | 25.0 |
<picture> elemento similar al <video> y <audio> elementos. Diferentes dispositivos pueden ser recursos, los recursos establecidos en primer lugar el uso preferido:
Ejemplos
<srcset Fuente = "img_smallflower.jpg" los medios de comunicación = "(max-width: 400px)">
<Fuente srcset = "img_flowers.jpg">
<Img src = "img_flowers.jpg" alt = "Flores">
</ Foto>
Trate »
srcset propiedad debe ser la definición del recurso de imagen.
media atributo es opcional, en los medios de consulta CSS @media gobernar Ver detalles.
No apoye <picture> elementos del navegador puede definir <img> elemento en su lugar.