¿Cómo escalar una imagen para cubrir todo el div principal? [duplicate]

6 minutos de lectura

avatar de usuario
neumusic

http://jsfiddle.net/Log82brL/15/

Este <img> no es una envoltura retráctil como esperaría con min-width:100%

Estoy tratando de encoger el <img> hasta que la altura o el ancho coincidan con el contenedor

Haga clic en cualquier parte del <iframe> para cambiar las formas de los contenedores

Por favor, intente editar el <img> CSS:

  1. MANTENER LA RELACIÓN DE ASPECTO
  2. CUBRIR TODA LA SUPERFICIE DEL CONTENEDOR DIV
  3. SOLO EDITA LA IMAGEN

Mi pregunta es específicamente: escalar un <img> para mantener la relación de aspecto pero cubrir toda la superficie de los padres <div> incluso como padre <div> cambia de tamaño

¿Quizás de alguna manera podría usar css flex box-layout o algo así? ¿Quizás una transformación?

  • ¿Se puede añadir un violín o una pluma de la misma?

    – Tushar

    2 de julio de 2015 a las 5:59


  • ¿Intentó agregar ancho y alto attr a la etiqueta img y lo configuró en automático o heredar?

    – vish

    2 de julio de 2015 a las 6:06

  • ¿Cómo puede mantener la relación de aspecto y aún así cubrir toda la superficie? no lo entiendo

    – Acertijo

    8 de julio de 2015 a las 6:33

  • @neaumusic Compruebe la respuesta de actualización.

    – Acertijo

    8 de julio de 2015 a las 6:48

  • ¿Quieres el equivalente de background-size: cover pero para un elemento img? Si no, como @Riddler, tampoco entiendo lo que quieres lograr

    – FelipeAls

    8 de julio de 2015 a las 9:11

http://jsfiddle.net/Log82brL/7/

#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ajuste de objeto: la cubierta permite que el contenido reemplazado se dimensione para mantener su relación de aspecto mientras llena todo el cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de cubierta contra el ancho y la altura utilizados del elemento.

  • Este método tiene terribles compatibilidad con navegadorpero hay un polirelleno para eso.

    –David Mann

    12 de julio de 2015 a las 3:32

  • El soporte no es tan malo en absoluto. Es solo IE que no lo admite. caniuse.com/#feat=object-fit

    – 2ne

    12 de julio de 2015 a las 7:14

  • Por mucho que me gustaría que no fuera así, IE todavía representa una buena parte del uso del navegador. Aún así, esta es la misma respuesta que habría dado, así que no puedo quejarme demasiado. Principalmente solo quería mencionar el polyfill.

    –David Mann

    12 de julio de 2015 a las 11:02

  • el caso de uso objetivo son los navegadores webkit, afortunadamente no tengo que lidiar con IE, creo que esta podría ser la respuesta real, simplemente no puedo hacer que funcione con el violín

    – Neumúsica

    13 de julio de 2015 a las 22:15

  • oh hombre, gracias! esto me salvó después de horas de tirarme del pelo.

    – jack samurái

    11 de septiembre de 2020 a las 6:03

avatar de usuario
Luz

Si no quieres tocar el contenedor, pon el fondo en el <img>

#img { 
  background: url(imgpath) no-repeat center;
  background-size: cover;
}

Puede configurar la fuente HTML en un píxel base64 transparente (crédito Trucos CSS)

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

http://jsfiddle.net/Log82brL/17/

  • wow, cómo nadie pensó en esto. no puedo tocar el contenedor div porque es una clase compartida, pero el img definitivamente puede tener una fuente vacía

    – Neumúsica

    14 de julio de 2015 a las 18:06

  • Esto es un truco y va en contra del html semántico. object-fit: cover; width: 100%; height: 100% es la respuesta correcta.

    – Dziad Borowy

    14 de enero de 2021 a las 23:18


avatar de usuario
enigma

¿Probaste la solución de arranque?

http://getbootstrap.com/css/#images-responsive

que es bastante

.img-responsive
{
max-width: 100%;
height: auto; 
display: block;
}

Agregar a su pregunta de actualización

http://jsfiddle.net/arunzo/Log82brL/5/

.skinny>img
{
    max-width:none !important;
    min-height:none !important;    
    max-height:100%;
    -webkit-transform:translate3d(+50%, +50%, 0);
}

Y todavía no estoy seguro de qué es lo que buscas, lo siento por la animación entrecortada.

  • el ancho nunca puede ser inferior al 100% si quiero que llene toda la superficie. creo que su solución se ajusta a la imagen dentro del contenedor

    – Neumúsica

    2 de julio de 2015 a las 22:48

  • solo quiero tener la parte superior/inferior fuera del elemento principal, o la izquierda/derecha fuera del elemento principal, pero no ambas, y debe estirarse si el contenedor principal crece

    – Neumúsica

    8 de julio de 2015 a las 8:26

  • Lo entiendo y eso es exactamente lo que he logrado. Intente usar las herramientas de inspección de Chrome para verificarlo usted mismo. Cambiar el tamaño de la ventana de resultados por si acaso

    – Acertijo

    8 de julio de 2015 a las 8:55


avatar de usuario
Yeldar Kurmangaliyev

Puedes usar CSS background en lugar de HTML img.

.myDiv
{
  height: 400px;
  width: 300px;
  background-image: url('image-url.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border: 1px solid #000000;
}

<div class="myDiv">
</div>  

Aquí está el Demostración de violín JS.
Trata de cambiar height y width – verás que la imagen se estira para llenar el div.

También puedes diferentes background-size valores:

  1. Estiramiento proporcional para contener: background-size: contain;
    división demasiado alta
    División demasiado amplia

  2. Estiramiento proporcional para llenar: background-size: cover;
    división demasiado alta
    División demasiado amplia

  3. Estirar para llenar el 100%: background-size: 100% 100%;
    división demasiado alta
    División demasiado amplia

usar la propiedad abreviada de fondo css único

.myDiv
{
  height: 400px;/*whatever you want*/
  width: 300px;/*whatever you want*/
  background: url('image-url.png') no-repeat center center;
  background-size: contain;
}

<div class="myDiv">
</div> 

  • Esta es una buena solución si el OP puede salirse con la suya con ajustes menores en el html, a menos que IE8 deba ser compatible (IE8 no lo hace background-size)

    – Enrique

    13 de julio de 2015 a las 17:19


Respuesta actualizada. Ahora funciona según lo previsto.

var toggle = false,
    containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
#container {
    overflow: hidden;
    width: 400px;
    height: 200px;
    transition: all .5s;
    margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
    width: 200px;
    height:600px;
}
#img {
    height: auto;
    left: 50%;
    margin: auto;
    min-height: 100%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%); /* changed to 2d translate */
    width: 100%; /* full width in wide mode */
}

#container.skinny #img {
    width: auto; /* width reset in tall mode */
}
<div id="container">
    <img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>

  • Esta es una buena solución si el OP puede salirse con la suya con ajustes menores en el html, a menos que IE8 deba ser compatible (IE8 no lo hace background-size)

    – Enrique

    13 de julio de 2015 a las 17:19


http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div

contenido Y centrado

Creo que esta es la representación que estás tratando de obtener, esto podría ayudar;)

https://jsfiddle.net/erq1otL4/

<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>   

#container.skinny {
width: 400px;
height:600px;
}
#container {
    width: 400px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-color:pink;
    background-position: center center;
}

var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");

¿Ha sido útil esta solución?