La siguiente es una publicación invitada de Parker Bennett donde explora algunas formas diferentes de abordar el comportamiento de las imágenes fluidas y receptivas.
A veces, desea que una imagen cambie de tamaño de manera receptiva, pero restrinja su altura, recortándola luego a medida que se ensancha. Aquí, exploramos tres opciones con varias compensaciones.
La pareja feliz, al frente y al centro: background-position: center bottom.
Opción uno: imagen de fondo
Editar en CodePen
Aquí, en lugar de un <img>, creamos un div con un background-image y usa el nuevo dandy de CSS3 background-size: cover para que tenga un tamaño proporcional. Como beneficio adicional, podemos recortar fácilmente desde la parte superior, central o inferior usando background-position.
Un problema potencial es que necesitamos especificar una altura para el div para mostrar. Esto le da una altura fija que no escala proporcionalmente (al menos no sin consultas de medios CSS). Cuando se vuelve lo suficientemente estrecho, los lados comienzan a recortarse (esto podría ser preferible, depende).
Además, una verificación rápida con caniuse.com muestra que esto fallará notoriamente en IE8 (mostrando la imagen en tamaño completo), pero gracias a Louis-Rémi Babé, hay una solución de polyfill de tamaño de fondo (aunque requiere una posición relativa o fija, y un índice z). IE8 también necesita un polyfill para consultas de medios CSS. Hay un par de opciones.
.bg-image {
/* image specified in separate class below */
height: 240px;
width: 100%;
}
.bg-image-wedding {
background-image: url(img/photo-wedding_1200x800.jpg);
/* lt ie8 */
-ms-background-position-x: center;
-ms-background-position-y: bottom;
background-position: center bottom;
/* scale bg image proportionately */
background-size: cover;
/* ie8 workaround - http://louisremi.github.io/background-size-polyfill/ */
-ms-behavior: url(/backgroundsize.min.htc);
/* prevent scaling past src width (or not) */
/* max-width: 1200px; */
}
/* example media queries */
@media only screen and (min-width : 768px) {
.bg-image { height: 320px; }
}
@media only screen and (min-width : 1200px) {
.bg-image { height: 400px; }
}Ese soy yo en el medio: background-position: center center.
Algo a tener en cuenta background-size: cover aumentará fácilmente la escala más grande que el tamaño nativo de la imagen src (o no, si establece un ancho máximo). *
Sin embargo, existen algunas desventajas en el uso de background-image. No es tan semántico o modular como un img, por lo que es menos sencillo de mantener. Aparentemente, está atascado con una altura fija o consultas de medios CSS engorrosas. Además, los usuarios no pueden guardar la imagen tan fácilmente (a veces es preferible).
Opción dos: img con un toque
Editar en CodePen
Aquí, usamos un img con max-width establecido en un porcentaje del elemento contenedor para que se escale de manera receptiva, luego envuélvalo en un div con overflow: hidden y una altura especificada o max-height.
Cuando cambia el tamaño más allá de 700px, la novia desaparece.
.crop-height {
/* max-width: 1200px; /* img src width (if known) */
max-height: 320px;
overflow: hidden;
}
img.scale {
/* corrects inline gap in enclosing div */
display: block;
max-width: 100%;
/* just in case, to force correct aspect ratio */
height: auto !important;
width: auto9; /* ie8+9 */
/* lt ie8 */
-ms-interpolation-mode: bicubic;
}Como puede ver, la parte inferior de la imagen ahora se recorta a medida que se ensancha. Pero, ¿y si quieres que se corte desde la parte superior? Sorprendentemente, puede usar CSS3 transform:rotate() agregamos una clase “flip” a ambos img.scale ydiv.crop-height– voltear la imagen completamente.
¡Ahí está la feliz pareja! (A menos que esté usando IE8 o una versión anterior).
/* apply to both img.scale and div.crop-height */
.flip {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
/* needed? not sure */
zoom: 1;
}
img.flip {
/* if native or declared width of img.scale
is less than div.crop-height, this will
flipped img left */
float: right;
/* add clearfix if needed */
}Novedoso, pero limitado solo a cultivos superiores. Y, como era de esperar, esto tampoco funciona en IE8, quizás fallando menos notoriamente (simplemente se recortará desde la parte inferior como antes). La mala noticia es que no he encontrado ninguna opción de polyfill que funcione porque necesitan una altura y un ancho específicos.
Opción tres: enfoque híbrido
Editar en CodePen
¿Y si pudiéramos tener las ventajas de especificar un img (p. ej., usando max-height por lo que obtenemos una escala vertical proporcional por debajo de una cierta altura), pero también el recorte flexible y el soporte de polyfill IE8 proporcionaron un background-image? ¡Podemos!
La imagen tiene visibility: hidden, la imagen de fondo tiene background-position: center center.
El truco consiste en hacer que el tamaño de respuesta img invisible. Con visibility: hidden conserva el diseño, por lo que vemos el background-image Detrás de eso. (Dado que es la misma fuente de imagen, no debería tener que descargarse dos veces). Si desea un acceso fácil de usar, puede usar opacity: 0. Ahora los usuarios pueden arrastrar la imagen o hacer clic derecho para guardar. (La opacidad y el tamaño del fondo necesitan algunos bits de solución adicional de IE8).
opacity: 0. Una imagen de fondo que puede arrastrar o hacer clic derecho para guardar. Funciona en IE8 (con ayuda).
Otro pensamiento es utilizar un proxy más comprimido. imgy utilizar consultas de medios CSS para ofrecer una resolución más alta background-image según sea necesario. Esta imagen puede incluso tener un tamaño proporcionalmente más pequeño (por ejemplo, que coincida con su altura máxima) o tener una marca de agua. Echa un vistazo a esta publicación de Programar Plussobre consultas de medios y esta útil combinación de resolución para Sass.
Aquí, una media escala de 70 KB img está sosteniendo el espacio para la resolución más alta background-image.
.crop-height {
/* max-width: 1200px; /* img src width (if known) */
max-height: 320px;
overflow: hidden; }
.bg-image-wedding {
/* for small devices */
background-image: url(img/photo-wedding_1200x800.jpg);
/* lt ie8 */
-ms-background-position-x: center;
-ms-background-position-y: bottom;
background-position: center bottom;
/* scale bg image proportionately */
background-size: cover;
/* ie8 workaround - http://louisremi.github.io/background-size-polyfill/ */
-ms-behavior: url(/backgroundsize.min.htc);
*/ prevent scaling past src width (or not) */
/* max-width: 1200px; */ }
.invisible {
visibility: hidden; }
.transparent {
/* trigger hasLayout for IE filters below */
zoom: 1;
/* 0 opacity in filters still displays layout */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=10);
opacity: 0; }
/* example media query for smaller non-retina devices */
@media
only screen and (max-device-width : 600px) and (-webkit-max-device-pixel-ratio: 1),
only screen and (max-device-width : 600px) and ( max-device-pixel-ratio: 1) {
.bg-image-wedding {
background-image: url(img/photo-wedding_600x400.jpg);
}
}
/* example media query for retina ipad and up */
@media
only screen and (min-device-width : 768px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-width : 768px) and ( min-device-pixel-ratio: 1.5) {
.bg-image-wedding {
background-image: url(img/[email protected]);
}
}Terminando
Hasta el día en que CSS3’s object-fit es compatible, que puede tardar un tiempo, esta opción híbrida me parece el mejor enfoque. Aún así, es bueno tener opciones. Espero que hayas sacado algo de mi camino: exploración demasiado exhaustiva. Puede echar un vistazo al código fuente para obtener más información (opción uno, dos o tres), o descargar los archivos de ejemplo aquí. Si tiene alguna pregunta, comentario o corrección, escríbame: parker@parkerbennett.com.
* Puede hacer una imagen de alta calidad como una imagen de fondo si lo desea. Solo necesita “pre-agrandarlo”, agregando un ancho y alto proporcionalmente más grandes al elemento img en sí: <img width="2400px" height="1600px" src="https://css-tricks.com/crop-top/img/photo-wedding_1200x800.jpg /> (editar en CodePen).