Twitter Bootstrap Question posted in

How to resize image with CSS without altering image quality-Twitter bootstrap

I have a Bootstrap carousel with the below code; how can I size this image to completely fill the carousel with losing image quality and also ensure the image height does not exceed the width or height of the carousel? image

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active" style="width:400px;">
      <img class="d-block w-100" src="{{articles.image.url}}" alt="First slide" style=" width:100%;height:auto;">
      <div class="carousel-caption d-none d-md-block">
        <h5>Latest</h5>
        <p>{{articles.title}}</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">{% lorem 1 p %}
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">{% lorem 1 p %}
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
Tags:

6

Answers


  1. 0

    You can make the image 100% width and height auto.

    Login or Signup to reply.
  2. 0

    Old code: 

    <div class="carousel-inner">
    <div class="carousel-item active" style="width:400px;">
      <img class="d-block w-100" src="{{articles.image.url}}" alt="First slide" style=" width:100%;height:auto;">
      <div class="carousel-caption d-none d-md-block">
        <h5>Latest</h5>
        <p>{{articles.title}}</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">{% lorem 1 p %}
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">{% lorem 1 p %}
    </div>
  </div>

    Edit the carousel-item with:

    width: 100%;
height: auto;
    Login or Signup to reply.
  3. 0

    Use object fit property in your css, and give a fixed width and height to
    your image tag or respective class so that every image will have same width and height, Now Your Image won’t be distorted.

     .d-block w-100 {
   width:100%;
   height:550px;
   object-fit:cover;
   object-position:50% 50%;
  }
    Login or Signup to reply.
  4. 0

    Another alternative is to use css background images instead of img tags and using the background-size cover property, which has more browser support as compared to img object fit property.

    <div class="carousel-item" style="background: url('')"></div>

.carousel-item{
    height: 500px;
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
    Login or Signup to reply.
  5. 0

    My previous image size was 960px*720px I was using it for a logo. This worked in reducing the size without stretching.

    Using a CSS selector to point to that image adjust the height

    { height: 100px;}

    The default value of width is auto.
    You could adjust the value of the height as you see fit depending on what you are aiming for.

    Login or Signup to reply.
  6. 0

    I faced the same problem and I fixed that by add d-flex and justify content to center images like this,

    <div class="slide-control d-flex justify-content-center">

    Then I used those CSS property

    .slide-image {
    width: auto;
    height: 870px; 
   }
   .slide-control{
    margin: 40px 177px 0 177px;
   }

    You should use margin inside .slide-control class , otherwise slide will go, end of the left side.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search