Tengo tres problemas:Antecedentes: cómo llenar div todo si la imagen es pequeño y viceversa
Cuando traté de usar una imagen de fondo en un div tamaño más pequeño, el div muestra sólo una parte de imagen. ¿Cómo puedo mostrar la parte completa o una parte específica de la imagen?
Tengo una imagen más pequeña y quiero usar en una div más grande. Pero no quiero usar la función de repetición.
¿Hay algún modo en CSS para manipular la opacidad de una imagen?
Cambie el tamaño de la imagen para que se ajuste al tamaño div.
Con CSS3 se puede hacer esto:
/* with CSS 3 */
#yourdiv {
background: url('bgimage.jpg') no-repeat;
background-size: 100%;
}
How Do you Stretch a Background Image in a Web Page:
Sobre la opacidad
#yourdiv {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
O mirar a CSS Image Opacity/Transparency
pero esto creará una carga sobre el servidor para cargar múltiples imágenes (lo cual es similar, como v sabe) ... así que en vez de usar múltiples imágenes, usar una imagen y strechg n collasping es una mejor manera ... pero no sé cómo hacerlo ... –
gracias por el problema de opacidad ... –
Los puntos 1 y 2 no son soluciones a este problema. El primer punto es para mantener la relación de aspecto en una imagen; el segundo punto parece no funcionar en absoluto. Con CSS3, la propiedad de tamaño de fondo solucionará este problema, hasta entonces tienes que quedarte con algún truco, supongo. – Sondre
Estoy de acuerdo con el ejemplo de Yossi, estirar la imagen para adaptarse a la div pero yo n de una manera ligeramente diferente (sin imagen de fondo ya que esto es un poco inflexible en css 2.1). Mostrar la imagen completa:
<div id="yourdiv">
<img id="theimage" src="image.jpg" alt="" />
</div>
#yourdiv img {
width:100%;
/*height will be automatic to remain aspect ratio*/
}
Mostrar parte de la imagen con background-position:
#yourdiv
{
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: 10px 25px;
}
Igual que la primera parte de (1) la imagen se escala a la div tan grande o más pequeña ambos funcionarán
Igual que yossi's.
err, el formateo de mi publicación no funcionó? Utilicé el icono de la barra de herramientas ... :( – Bazzz
intenté antes y también ... si el tamaño de la imagen es 100px 100px y div tiene 400px tamaño 400px, entonces está fijo en la esquina superior. No es strechg ... tamaño del fondo no también funciona ... usando ie8, firefox, chrome, safari, los últimos navegadores –
Aquí hay un ejemplo: http://jsfiddle.net/9mawE/1/ El div tiene 150 px de ancho. El logo de Google tiene más de 150 px de ancho pero está reducido para caber en el div. El ícono de Google Earth tiene menos de 150px de ancho y se escala para ajustarse al divisor de 150px de ancho, el tamaño de fondo no funciona en IE 8 porque es CSS 3 que aún no está soportado. – Bazzz
En lugar de dar background-size:100%;
Podemos dar background-size:contain;
Salida esto para diferentes opciones disponibles: http://www.css3.info/preview/background-size/
Para ampliar automáticamente la imagen y cubrir toda la sección div sin dejar ninguna parte de ella sin llenar , use:
background-size: cover;
esta página y el mayor beneficio en mi caso. Gracias –
no funciona para mí, pero mi div está dentro de un
@ David-Caín se debe actualizar la más adecuada responda como se señala en los comentarios a continuación – Ouadie
@Ouadie - No soy el póster original - Simplemente edité la pregunta para mayor claridad. –
@ aakash-sahai ¿podría actualizar la respuesta aceptada a la más adecuada? – Ouadie