CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcoldfusion-9
Roberto Flores
Roberto Flores

Reputation: 789

Make an image responsive

I am trying to find a way to make my images responsive.

I am using Bootstrap and their is a class name "img-responsive"

However, it is not resizing the images correctly.

The following is what I did to call it and it does not do it correctly:

HTML:

<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345">

The following is the container which I use from bootstrap.css.

CSS:

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

I am not sure what I am doing wrong

UPDATE:

I am using coldfusion and I am trying to use img-responsive. However, it is not working and I am not sure why.

I have used the following css to make the banner images responsive but it does not appear to work

/*responsive carousel images*/
figure {
  max-width: 460px;
  max-height: 345px;
}
figure img {
  max-height: 345px;
}
.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

and the following coldfusion code:

<figure>
    <img class="img-responsive" src="#local.item.getImageURL(argumentCollection=local.imageArgs)#" alt="#HTMLEditFormat(local.item.getTitle())#">
</figure>

Upvotes: 0

Views: 689

Answers (2)

Ricky Ruiz
Ricky Ruiz

Reputation: 26791

The problem is that you are using inline-styles in your img tag which affect your img-responsive class.

The thing with fixed width and height is that it makes responsive design difficult.

I recommend that you wrap your img in a figure and apply a max-width and max-height instead.

CODE SNIPPET:

figure {
  max-width: 460px;
  max-height: 345px;
}
figure img {
  max-height: 345px;
}
.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}
<figure>
  <img class="img-responsive" src="http://fillmurray.com/1000/1000">
</figure>

Upvotes: 1

Sergey Khmelevskoy
Sergey Khmelevskoy

Reputation: 2544

Bootstap .img-responsive declare max-width: 100% in .css But your inline width/height overwrite it

Therefore, you should try not to use inline width="" and height="" in responsive layouts

Upvotes: 0

Related Questions