0
210
ViewsCada vez que cambio la imagen, img cambia de tamaño
Quiero hacer que la etiqueta img sea estricta. En mi ejemplo, cada vez que cambio la imagen, el tamaño también cambia.
Aquí hay un ejemplo: 
.cat { width:200px } img { max-width: 100%; height: auto; } <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <div class="cat"> <img src="https://loremflickr.com/400/400" /> </div> </body> </html>3 answers
Answer question0
Está haciendo max-width:100% y height:auto , que lo deja ir a su tamaño predeterminado si desea que tengan el mismo tamaño, el mismo ancho que el gato y el mismo ancho que el img:
.cat { width:200px; height:200px; } img { width:200px; height: 200px; } Y en ese momento no necesitas el .cat porque ahora son los mismos, así que:
img { width:200px; height: 200px; } Puede eliminar el div con la clase cat ahora, ya que no es necesario. Y aquí está el código terminado:
img { width:200px; height: 200px; } <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <img src="https://loremflickr.com/400/400" /> </body> </html>0
Uso max-width: 100%; significa que cualquiera que sea el tamaño de la imagen, la imagen aparecerá en ella. Cuando el width: 200px está allí, una imagen de cualquier tamaño se mostrará solo en 200 px.
.cat { width: 300px; height: 300px; } img { width: 300px; height: 300px; }0
Las imágenes tienen width y height diferentes por defecto. Por lo tanto, debe especificar los valores de ellos. p.ej:
.cat { width:200px; height: 500px; border: solid; } img{ width: 100%; height: 100%; } .item { width: 100%; height: 50%; } <!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <div class="cat"> <div class="item"><img src="https://loremflickr.com/400/400" /></div> <div class="item"><img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" /></div> </div> </body> </html>