Imagen visualizable en offset en <img> etiquetas del mismo modo que para background-image

Question

Usando etiquetas <img> es posible compensar la imagen de la misma manera que con CSS background-image y background-position?

Hay imágenes principales en la página y tiene poco sentido tener miniaturas separadas cuando ambas se cargarán (aumentando así el ancho de banda). Algunas de las imágenes son retratos y otras son apaisado, sin embargo, necesito mostrar las miniaturas en un tamaño uniforme (y recortar el exceso donde no cumpla con la relación de aspecto deseada).

Aunque esto es posible utilizando otras etiquetas y valores CSS de fondo, sería preferible usar etiquetas simples <img>.

Answer 1

Desafortunadamente no, no es posible con solo una etiqueta <img>. Hay 2 soluciones que se me ocurren a su problema:

CSS Imagen de fondo

Crear una <div> donde se aplica la imagen como una propiedad background-image:

<div class="thumbnail" style="background: url(an-image.jpg) no-repeat 50% 50%"></div> 

CSS recorte

Utilice la propiedad clip-path para mostrar solo una sección de la imagen:

<!-- Clip properties are top, right, bottom, left and define a rectangle by its top-left and bottom-right points --> 
<div style="clip-path: inset(10px 200px 200px 10px)"> 
    <img src="an-image.jpg"> 
</div> 

Puedes leer más sobre esto in this article.

Answer 2

Si coloca la imagen en un div, puede usar los márgenes para mover la imagen. Este ejemplo particular usa un logotipo de imagen de sprite para el enlace de inicio que cambia de posición en el vuelo estacionario. También puede omitir la etiqueta A y mover la imagen usando el atributo de margen en #logo img.

El HTML:

<div id="logo"> 
    <a href="#"> 
     <img src="img/src.jpg" /> 
    </a> 
</div> 

El CSS:

#logo { 
    display: block; 
    float: left; 
    margin: 15px 0; 
    padding: 0; 
    width: 350px; //portion of the image you wish to display 
    height: 50px; //portion of the image you wish to display 
    overflow: hidden; //hide the rest of the image 
} 
#logo img { 
    width: 350px; 
    height: 100px; // you'll see this is 2x the height of the viewed image 
    padding: 0; 
    margin: 0; 
} 
#logo a { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
#logo a:hover { 
    margin-top: -50px; //move up to show the over portion of the image 
} 

Espero que ayude!

Answer 3

Antes

<img src="img.png"> Text, Links, Etc 

Después:

<img src="img.png" style="float:left; margin-bottom:-5px"> Text, Links, Etc 

Leer sobre el contexto en bloque y formateo de W3C.

Answer 4

Algunas de las imágenes son verticales y otras son horizontales, sin embargo, necesito mostrar las miniaturas en un tamaño uniforme (y recortar el exceso donde no cumpla con la relación de aspecto deseada).

Uso background-size: cover que debería exactly solve that problem → con good browser support!

Y hará la imagen de fondo (probablemente utilizando background-image como un estilo en línea): Clip

<img style="background-image: url('img/foo.png')"/>