CODEWITHSUNDEEP
jquerycssdjangotwitter-bootstrap
user1592380
user1592380

Reputation: 36267

How to scale images for a consistent image size

enter image description here

I am putting together a slide presentation using a jquery plugin called 'slick' (http://kenwheeler.github.io/slick/) using django and a bootstrap 3 template. I've got a basic carousel working using a django template that looks like:

{% load staticfiles %}

  <div class="your-class">
    <div>your content</div>
    <div><IMG src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>

    <div><IMG src="{% static 'img/slides/slide1.jpg' %}"></div>
    <div>your content</div>
  </div>

After adding the last slide I notice that the forward backward buttons were pushed way down (please see screenshot). I'm guessing this is related to the size of the slide. I just added.

I'm not a front end person so this is probably a basic question, but what is the best way to have a consistent size of slides. Can they be autoscaled to fit a predetermined size if they are different in original size. I'm making some of these by hand as well so I could in theory I could set them to a specific size if that would help

Upvotes: 0

Views: 1036

Answers (3)

Marek Lis&#253;
Marek Lis&#253;

Reputation: 3401

You can set width and height of any image via CSS. If you set only width or only height, it will scale the other dimension to keep the width/height ratio.

In css, you can do something like this:

#slider img {
    width: 600px;
}

Upvotes: 1

MaxRocket
MaxRocket

Reputation: 992

  • The best way to do that would be to resize the images dynamically on the server, python and django I'm sure have a million ways to do that.
  • The easiest way to do this in the browser, if you're going to require users to use modern (IE 9+) browsers, is to set a fixed size for the image wrapping div, the image height, and use the CSS Background Size property, which allows you various ways to fill the element

  • You can also set the css height property to a fixed amount, i.e., 

     <div class="img-wrap"><img src="..."/></div>

 div.img-wrap {
     overflow:hidden;
     height:100px;
  }
  div.img-wrap img {
     width:auto;
     height: 100px;
  }

  • If you really want to do it programmatically, you can use a JQuery plugin like Image Resize

Upvotes: 1

oscarvady
oscarvady

Reputation: 450

Try adding the property width in the img selector:

<div><img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>

DEMO: http://jsfiddle.net/ws4ty6wo/

Upvotes: 1

Related Questions