html - porcentaje - Imagen reducida de CSS para que quepa en el contenido de div, sin especificar el tamaño del original
mostrar imagen en html (10)
Quiero tener un sitio web donde pueda subir imágenes de diferentes tamaños para que se muestren en un control deslizante jquery. Parece que no puedo ajustar (reducir) la imagen en un div que contiene. Así es como tengo la intención de hacerlo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>
<body>
<div id="wrapper">
<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>
</div>
</body>
</html>
Y el CSS
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}
Intenté establecer el ancho máximo de mi imagen al 100% en CSS. Pero eso no funciona.
Creo que esta es la mejor manera de hacerlo, lo he probado y funciona muy bien.
#img {
object-fit: cover;
}
Aquí es donde lo encontré . ¡Buena suerte!
En una página web donde quería una imagen a escala con el cambio de tamaño del navegador y permanecer en la parte superior, al lado de un div fijo, todo lo que tenía que hacer era usar una única línea de CSS: overflow:hidden; y lo hizo el truco. La imagen escala a la perfección.
Lo que es especialmente bueno es que esto es puro CSS y funcionará incluso si JavaScript está desactivado.
CSS:
#ImageContainerDiv {
overflow: hidden;
}
HTML:
<div id="ImageContainerDiv">
<a href="URL goes here" target="_blank">
<img src="MapName.png" alt="Click to load map" />
</a>
</div>
Es muy sencillo. Simplemente establece el ancho de img en 100%
Espero que esto responda al viejo problema (sin usar la propiedad de fondo CSS)
Html
<div class="card-cont">
<img src="demo.png" />
</div>
Css
.card-cont{
width:100%;
height:150px;
}
.card-cont img{
max-width: 100%;
min-width: 100%;
min-height: 150px;
}
Esta es una vieja pregunta que sé, pero esta se encuentra entre las cinco principales de varias búsquedas de Google relacionadas. Aquí está la solución CSS única sin cambiar las imágenes a imágenes de fondo:
width:auto;
height:auto;
max-width:MaxSize;
max-height:MaxSize;
Automático aumentará (o disminuirá) el ancho y alto para ocupar el espacio que especifique con MaxSize. Sobrepasará los valores predeterminados de las imágenes que tú o el navegador del espectador puedan tener para las imágenes. Descubrí que es especialmente importante en Firefox de Android. Los píxeles o porcentajes funcionan para el tamaño máximo. Con el alto y el ancho establecidos en automático, se mantendrá la relación de aspecto de la imagen original.
Si desea llenar el espacio por completo y no le molesta que la imagen sea más grande que su tamaño original, cambie los dos anchos máximos al ancho mínimo: 100%; esto hará que ocupen completamente su espacio y mantengan la relación de aspecto. Puede ver un ejemplo de esto con la imagen de fondo de un perfil de Twitter.
Estoy usando esto, imágenes pequeñas y grandes:
.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}
Puede usar una imagen de fondo para lograr esto;
Desde MDN - Tamaño de fondo: contener :
Esta palabra clave especifica que la imagen de fondo se debe escalar para que sea lo más grande posible, al tiempo que se aseguran de que sus dimensiones sean menores o iguales a las dimensiones correspondientes del área de posicionamiento en segundo plano.
CSS:
#im {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("path/to/img");
background-repeat: no-repeat;
background-size: contain;
}
HTML:
<div id="wrapper">
<div id="im">
</div>
</div>
Varias de estas cosas no funcionaron para mí ... sin embargo, esto fue así. Podría ayudar a alguien más en el futuro. Aquí está el CSS:
.img-area {
display: block;
padding: 0px 0 0 0px;
text-indent: 0;
width: 100%;
background-size: 100% 95%;
background-repeat: no-repeat;
background-image: url("https://yourimage.png");
}
Yo suelo:
ajuste de objeto: cubierta;
-o-object-fit: cubierta;
para colocar imágenes en un contenedor con una altura y ancho fijos, esto también funciona muy bien para mis controles deslizantes. Sin embargo, cortará partes de la imagen dependiendo de su ubicación.
si quieres tanto el ancho como la altura, puedes probar
background-size: cover !important;
pero esto no distorsionará la imagen sino que llenará el div.