tamaño - mostrar imagen en html

¿Cómo establecer el ancho y alto de una imagen sin estirarla?

Question

Si tengo:

#logo {
width: 400px;
height: 200px;
}

entonces

<img id="logo" src="logo.jpg"/>

se estirará para llenar ese espacio. Quiero que la imagen permanezca del mismo tamaño, pero que ocupe tanto espacio en el DOM. ¿Debo agregar un encapsulamiento <div> o <span> ? Odio agregar marcas para el estilo.

Answer 1

¿Debo agregar un encapsulamiento <div> o <span>?

Creo que lo haces. Lo único que viene a la mente es el relleno, pero para eso tendrías que saber las dimensiones de la imagen de antemano.

Answer 2

Cargue la imagen como fondo para un div.

En lugar de:

<img id=''logo'' src=''picture.jpg''>

hacer

<div id=''logo'' style=''background:url(picture.jpg)''></div>

Todos los navegadores recortarán la parte de la imagen que no encaje.
Esto tiene varias ventajas más que envolverlo con un elemento cuyo desbordamiento está oculto:

1. Sin marcado adicional. El div simplemente reemplaza el img.
2. Centra o establece fácilmente la imagen en otra compensación. p.ej. url(pic) center top;
3. Repita la imagen cuando sea lo suficientemente pequeño. (OK, no sé por qué querrías eso)
4. Establezca un color bg en la misma declaración, aplique fácilmente la misma imagen a múltiples elementos y todo lo que se aplica a las imágenes BG.

Answer 3

Haz un div y dale una clase. A continuación, suelta un img en él.

<div class="mydiv>
<img src="location/of/your/image" ></img>
</div>

Establezca el tamaño de su div y hágalo relativo.

 .mydiv {
position: relative;
height:300px;
width: 100%;
overflow: hidden;
}

luego dale estilo a tu imagen

img {
width: 100%;
height: auto;
overflow: hidden;
}

Espero que ayude

Answer 4

Lo que puedo pensar es estirar el ancho o la altura y dejar que cambie de tamaño en relación-aspecto. Habrá un espacio en blanco en los lados. Algo así como una pantalla ancha muestra una resolución de 1024x768.

Answer 5

Puede agregar object-fit: cover; a su CSS y recortará automáticamente la imagen

Answer 6

Puede usar de la siguiente manera:

.width100 {
max-width: 100px;
height: 100px;
width: auto;
border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

Answer 7

Sí, necesitas un div encapsulante:

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

con algo como:

#logo { height: 100px; width: 200px; overflow: hidden; }

Otras soluciones (relleno, margen) son más tediosas (en el sentido de que debe calcular el valor correcto en función de las dimensiones de la imagen) pero tampoco permiten que el contenedor sea más pequeño que la imagen.

Además, lo anterior se puede adaptar mucho más fácilmente para diferentes diseños. Por ejemplo, si quiere la imagen en la parte inferior derecha:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Answer 8

Si usar flexbox es una opción válida para usted (no necesita respaldar navegadores antiguos), consulte mi otra respuesta here (que posiblemente sea un duplicado de esta):

Básicamente, necesitarías envolver tu etiqueta img en un div y tu css se vería así:

.img__container {
display: flex;
padding: 15px 12px;
box-sizing: border-box;
width: 400px; height: 200px;
img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
}

Answer 9

Todo lo que hice fue cambiar la hoja de estilo de la etiqueta img. Pero en mi caso, conocía el contenedor div y la altura. También contenedor div con, la altura era mayor que el tamaño de la imagen real. Espero que esto ayude.

Trabajó para mi.

http://guntucomputerhacks.blogspot.com.au/2014/08/force-image-width-and-height-without.html

Answer 10

puede intentar configurar el relleno en lugar del alto / ancho.

Answer 11

Ajuste de objeto CSS3

No estoy seguro de cuán lejos ha sido implementado por webkit, IE y firefox. Pero Opera funciona como magia

object-fit funciona con contenido SVG, pero también se puede lograr el mismo efecto configurando el atributo preserveAspectRatio="" en el SVG mismo.

img {
height: 100px;
width: 100px;
-o-object-fit: contain;
}

La demo de Chris Mills está aquí http://dev.opera.com/articles/view/css3-object-fit-object-position/

Answer 12

#logo {
width: 400px;
height: 200px;
/*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
object-fit:scale-down;
}