Cuando hacemos que la etiqueta <img>
sea responsive con max-with="100%"
existe alguna forma de asignarle un tamaño de imagen especifico: ejemplo 1200px x 630px, así cuando la imagen por alguna razón no cargue siga teniendo ese tamaño de imagen y no rompa el diseño?
3 respuestas
Hay una formas de hacer esto. Primero debemos tener en cuenta lo siguiente:
- La etiqueta
max-width
la utilizamos para que tome el 100% cuando esté en un dispositivo de un tamaño menor.
Lo que tienes que hacer es asignarle un tamaño a través de los media-queries.
Ejemplo:
@media (min-width: 1000px) {
.img-responsive{
min-width: 1200px;
min-height:600px
}
}
@media (max-width: 800px) {
.img-responsive{
min-width: 600px;
min-height:600px
}
}
Básicamente esta es la idea, aunque te recomiendo no trabajar con el alto porque te puede presentar un resultado inesperado: imágenes estiradas o algo por el estilo.
No entiendo muy bien la pregunta, sobre todo cuando preguntas sobre si no carga, ¿quieres crear un placeholder para la imagen?
body {
padding: 0;
margin: 0 auto;
}
.micontenedor {
width: 80%;
float: left;
margin-bottom: 20px;
border: 1px dashed black;
}
.midiseno {
background: #54c3f1;
width: 50%;
min-width: 50%;
float: left;
color: white;
font-family: Arial;
}
.mifoto {
float: right;
max-width: 100%;
width: 50%;
background: #7eda47;
min-width: 50%;
}
.mifotoresponsiva {
max-width: 100%;
display: block;
min-height: 200px;
max-height: 200px;
min-width: 100%;
}
.logo {
width: 30%;
margin: 0 auto;
}
.img-responsive {
width: 100%;
display: block;
}
<div class="micontenedor">
<div class="midiseno">
<div class="estilotexto">
Ejemplo con fotografía cargada
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1017px-Starbucks_Corporation_Logo_2011.svg.png" class="img-responsive">
</div>
</div>
</div>
<div class="mifoto">
<div class="mifotoresponsiva">
<img src="http://es.best-wallpaper.net/wallpaper/1600x1200/1111/Toucan-in-the-rainforest_1600x1200.jpg" class="mifotoresponsiva">
</div>
</div>
</div>
<div class="micontenedor">
<div class="midiseno">
<div class="estilotexto">
Ejemplo sin fotografía
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1017px-Starbucks_Corporation_Logo_2011.svg.png" class="img-responsive">
</div>
</div>
</div>
<div class="mifoto">
<div class="mifotoresponsiva">
<img src="http://es.best-wallpaper.net/wallpaper/1600x1200/1111/Toucan-in-the-rainforest_1600x1200.jpg2" class="mifotoresponsiva">
</div>
</div>
</div>
Si la imagen no carga, el comportamiento natural es que el espacio se colapse.
Si requieres que el espacio que ocupa la imagen se mantenga aún cuando la imagen no se carga, entonces puedes asignar el tamaño que deseas al contenedor de la imagen, no directamente a la imagen.
Ej. HTML
<div class="img-container">
<img ... />
</div>
Ej. CSS
.img-container {
max-width: 1200px;
max-height: 630px;
}
.img-container img {
max-width: 100%;
..
}
Extra a esto como recomendación, siempre que puedas agrega estas reglas directamente en tu archivo principal de CSS y evita mezclar diseño con HTML.