Reemplazar la imagen en un con CSS | Programar Plus ▷ Tutoriales

La siguiente es una publicación invitada de Marcel Shields. Marcel estaba en un lugar difícil donde necesitaba cambiar la imagen en una página pero no tenía acceso al HTML. Raro, pero estoy seguro de que todos nos encontramos en situaciones extrañas como esta. Explica cómo logró reemplazar esa imagen sin necesidad de acceder al HTML o JavaScript. También resulta ser una buena forma de reemplazar cualquier cosa con una imagen.

Solo quería compartir algo que encontré realmente genial sobre el uso del tamaño de caja de CSS. Chris escribió una muy buena introducción hace unos años si no está familiarizado con la propiedad. Hace que las cosas sean mucho más sensatas cuando se piensa en el diseño. A la gente le encanta tanto que le ponen todo como salsa picante. Quería compartir cómo lo encontré útil como (otra) técnica de reemplazo de imágenes.

Hace unos días en el trabajo, me pidieron que reemplazara un <img> en nuestro sitio con otra imagen alojada en otro lugar. Simple verdad? Pero el problema era que no podría reemplazar el marcado porque ya estaba implementado en producción, pero podría inyectar CSS o JS a través de nuestro CMS. Cualquiera que sea la tecnología que elija, se insertará en todas las páginas del sitio. Solo necesitaba en una página específica, y los atributos de los contenedores principales no eran específicos de la página deseada.

<head>
  <title>Really Cool Page</title>
</head>
<body>
  <!-- .header would be across site on other pages with different children, so no background image adding -->
  <div class="header">
    <img class="banner" src="https://notrealdomain1.com/banner.png">
  </div>
</body>

Esto es simple de hacer con JavaScript, pero quería ver si había otra forma, incluso más simple. Después de algunas iteraciones en Chrome Dev Tools, pensé en usar la box-sizing propiedad para mantener las dimensiones estrictas, agregue la nueva imagen como imagen de fondo y simplemente empuje la imagen en línea fuera del camino con relleno y vea qué sucedió.

/* All in one selector */
.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

Funcionó de maravilla. Esto es lo que es genial:

Funciona en casi cualquier elemento, incluso vacíos como <img> o <hr>
La compatibilidad con el navegador es excelente (Chrome, Firefox, Opera, Safari, IE8 +) http://caniuse.com/#feat=css3-boxsizing
Se abstiene de utilizar SEO de forma hostil display: none u otras propiedades

Ese último punto parecía importante, ya que también funciona muy bien para el reemplazo de texto sin ningún ajuste. ¡Echale un vistazo!

CodePen Insertar respaldo