Consejo rápido flexione sus imágenes

Una razón evidente por la que muchos desarrolladores han elegido sitios de ancho fijo sobre elástico es porque el uso de imágenes en línea puede destruir el diseño de un sitio, como una estampida de ganado que repetidamente le da una patada en la ingle. Simplemente no es divertido en absoluto. Claro, puedes especificar sus anchos usando porcentajes o ems, pero esos métodos no son ideales. En tales casos, ¿por qué no intentar usar la técnica de fondo??

Paso 1: Configurar el HTML

Primero, vamos a crear un archivo html muy simple..

 
 
 
 
 Lorem ipsum dolor sit amet, consultor adipiscing elit. Vestibulum ullamcorper magna quis velit. Nam vitae dui et massa convallis vulputate. Aliquam ante magna, fermentum nec, eeler scelerisque, semper quis, ipsum. Consectetuer Fusce enim quis lorem. Morbi elit turpis, consecuencia ac, lacinia nec, dignissim ac, velit. Proin mauris orci, rutrum a, suscipit eu, sagittis et, nisi. Quisque at mi ac magna fermentum elementum. 
 

Paso 2: Añadir el CSS

 #contenedor ancho: 50%; margen: auto; relleno: 1em; fondo: # 3d332a; color: # b8ada2; ?  #image altura: 300px; fondo: url (Girl.jpg) centro sin repetición; 

Para que nuestro contenedor div sea flexible, he establecido el ancho en el 50% de la ventana del navegador. A continuación, he establecido los márgenes en automático para centrar los contenidos. El relleno, el fondo y el color son simplemente un estilo estético..

La etiqueta div con un id de "imagen" es donde agregaremos la imagen de fondo. La clave aquí es que no estoy configurando un ancho específico para la imagen, solo la altura. Cuando agregue la imagen como fondo, querrá asegurarse de que la "centre" (centro sin repetición). Esto, en efecto, hará que el foco principal de su imagen se muestre en todo momento.. * Nota: asegúrese de utilizar una imagen que tenga el punto focal principal en el centro.

Estas hecho

Vea su trabajo en un navegador e intente aumentar y disminuir la ventana del navegador. Hay algunas cosas que se deben tener en cuenta al utilizar este método..

• Asegúrese de usar imágenes que sean tan amplias como sea necesario..
• El centro de su imagen debe ser el punto focal..
• Centrar la imagen de fondo.
• Considere hacer que el ancho máximo de su div contenedor sea igual al ancho completo de la imagen.
• Además, considere agregar un ancho mínimo para asegurarse de que su imagen no se encoja demasiado.

Ten un excelente fin de semana. ¡Volvamos a encontrarnos aquí el lunes! Por cierto, asegúrate de seguirnos en TWITTER!