Hola chicos estoy usando bootstrap orgía y que tienen algún problema con la imagen de la altura y la anchura. Aunque yo lo defino en la img atributo que todavía se muestra como el original de la resolución,el siguiente es el código que estoy utilizando

<div class="col-md-6 col-sm-6">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
            <div class="item">
                <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" />
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next"></span>
        </a>
    </div>
</div>

Aquí es demo de que.

¿Qué debo hacer para rellenar la imagen en una cierta altura y anchura, independientemente de su resolución original.

OriginalEl autor Mike Ross | 2015-11-13

10 Comentarios

  1. 10

    Puede utilizar background-size: cover, mientras que todavía se tiene oculto <img> elemento para el SEO y la semántica de los propósitos. Solo img url se usa dos veces, así que no hay ninguna carga adicional, y de fondo de tamaño está bien apoyado (a diferencia de object-fit que carece de soporte en IE, Borde y Android < 4.4.4).

    El Violín Demo

    HTML cambio:

    <div class="item" style="background-image: url(http://placehold.it/400x400);">
      <img src="http://placehold.it/400x400"/>
    </div>

    CSS cambio:

    .carousel {
      /* any dimensions are fine, it can be responsive with max-width */
      width: 300px;
      height: 350px;
    }
    
    .carousel-inner {
      /* make sure your .items will get correct height */
      height: 100%;
    }
    
    .item {
      background-size: cover;
      background-position: 50% 50%;
      width: 100%;
      height: 100%;
    }
    
    .item img {
      visibility: hidden;
    }
    puede especificar cómo hacer que sea más sensible en su respuesta por favor ?
    Esta es la forma respuesta a la visualización de la imagen (eventualmente utilizar contain en lugar de cover). La capacidad de respuesta de todo el carrusel no es parte de la pregunta, todavía se insinuó ya que puede utilizar max-width para hacerla adaptable de ancho.

    OriginalEl autor Matija Mrkaic

  2. 5

    Usted puede colocar a la altura de css y agregar !importante porque bootstrap es reemplazar a su altura con el auto , y el objeto de ajuste:cubierta; funcionará como el tamaño del fondo de la cubierta
    un violín

    .carousel{
      width:300px;
    }
    .item img{
      object-fit:cover;
      height:300px !important;
      width:350px;
    }

    OriginalEl autor عارف بن الأزرق

  3. 2

    Que tiene de ancho en el marcador de posición no debe importar, poner esto en tu css y debería funcionar, Si funciona, puede intentar quitar !importante.

     .carousel img {
            width:100% !important;
            min-width:100 !important;
            height: auto;
        }

    .img-responsive en bootstrap se acaba de establecer el ancho al 100%, por Lo que en el caso de que la imagen original proporciones son menos de carrusel de ancho no va a llenar.

    he intentado eso pero el problema es que el uso real de la anchura de la imagen en sí y yo no quiero eso. Quiero que la orgía de la altura y la anchura a ser 300×350 y no importa lo que la altura o la anchura de la imagen es, pero de relleno en esa orgía sólo

    OriginalEl autor Mathias Asberg

  4. 2

    Hacer que su imagen tardar hasta el 100% del tamaño del recipiente.
    utilizando altura:100% y width:100%.

    Restringir el tamaño de los valores de configuración del contenedor de tamaño deseado.

    .item{
      height:300px;
      width:350px;
    }
    .item img{
      width:100%;
      height:100%;
    }

    Espero que esto ayude.

    OriginalEl autor jmag

  5. 2

    Se está definiendo el tamaño de los marcadores de posición en la URL, no en los atributos HTML de los elementos.

    También echa un vistazo a Bootstrap .img-responsive clase aquí.

    Actualización

    Esto ha cambiado a .img-fluid en Bootstrap 4 Alfa y Beta

    creo sensible de la imagen y la definición de la altura y la anchura de ambos no trabajan juntos. derecho

    OriginalEl autor plushyObject

  6. 0

    Agregar esto en el css del archivo. Esto limitaría la altura y la anchura de la imagen y, por tanto, alinear.

    .item img {
    max-height: 300px;
    max-width: 350px;
    }

    OriginalEl autor Shalinee SIngh

  7. 0
    1. Agregar esta clase en cada atributo de imagen

    class="img-responsive center-block"

    Por ejemplo:

    <img src="http://placehold.it/350x350/aaa&text=Item 3" height="300" width="300" class="img-responsive center-block" />
    1. Agregar este estilo

      .active img{
        width: 100%;
      }

    OriginalEl autor Gnanasekar S

  8. 0

    Usted puede hacer eso con los siguientes estilos:

    .carousel-inner .item{
      width: 600px; /* Any width you want */
      height: 500px; /* Any width you want */
    }
    .carousel-inner .item img{
      min-width: 100%;
      min-height: 100%;
    }

    Mediante el establecimiento de min-* a los atributos de imagen, nos estamos asegurando de que al menos hemos 100% de ambos width y height.

    Actualizado JSFiddle

    OriginalEl autor Suthan Bala

  9. 0

    si es bien simple el uso de javaScript, aquí está la actualización del violín
    https://jsfiddle.net/a1x1dnaa/2/

    lo que he hecho es utilizar la imagen como imagen de fondo y sacó el <img> etiqueta.

    jQuery(function(){
      var items = $('.item');
      items.each(function() {
        var item = $(this);
        img = item.find("img");
        img.each(function() {
            var thisImg = $(this);
            url = thisImg.attr('src');
            thisImg.parent().attr('style', 'background-image:url('+url+')');
            thisImg.remove();
        });
      });
    });

    a continuación, puede utilizar algunos estilos para que la imagen llene la div

    .item {
      -webkit-background-size: cover;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      height: 200px; //you can use the height as you need 
    }

    esto debería funcionar para usted.

    si usted no desea utilizar javaScript, puede simplemente usar la imagen como imagen de la línea de estilo

    <div class="item" style="background-image: url(http://placehold.it/400x400)"></div>

    y el uso de la misma CSS como el anterior.

    OriginalEl autor Lucian

  10. 0
    .item img{
    min-width: 300px;
    min-height: 300px;
    overflow: hidden;}
    .item{
    width: 300px;
    height: 300px;
    overflow: hidden;
    }

    de probar este css y poco cambio en html. he utilizado diferentes src de la imagen para una mejor clearification.

    aquí se actualizó el violín

    OriginalEl autor Amit Kumar

Dejar respuesta

Please enter your comment!
Please enter your name here