html - una - Despliegue la imagen visible en<img> etiquetas de la misma manera que para la imagen de fondo

tamaño de imagen html

Question

El uso de etiquetas lisas <img> ¿es posible desplazar la imagen de la misma manera que con la imagen de fondo CSS y la posición de fondo?

Hay imágenes principales en la página y tiene poco sentido tener miniaturas separadas cuando se cargarán ambas (lo que aumenta el ancho de banda). Algunas de las imágenes son verticales y otras horizontales, sin embargo, tengo que mostrar las miniaturas en un tamaño uniforme (y recortar el exceso cuando no cumpla con la relación de aspecto deseada).

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

Answer 1

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

Use background-size: cover que debería resolver exactamente ese problema → ¡con un buen soporte de navegador !

Y crea una imagen del fondo (probablemente usando background-image como un estilo en línea):

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

Answer 2

Si coloca la imagen en un div, puede usar los márgenes para mover la imagen. Este ejemplo particular utiliza un logotipo de imagen de sprite para el enlace de inicio que cambia de posición al pasar el cursor. 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 de

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

Después:

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

Lea sobre el contexto de formateo de bloques en W3C.

Answer 4

Desafortunadamente no, no es posible solo con una etiqueta <img> . Hay 2 soluciones que puedo pensar en tu problema:

Imagen de fondo CSS

Cree un <div> donde la imagen se aplique como una propiedad de imagen de fondo:

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

Recorte de CSS

Use 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 en este artículo .