0

Basically, something simple like:

<div class="container">
  <img src="something.jpg" class="image">
  <div class="well">Title</div>
</div>

If the img can be max-height of like 400px for example (I think pinterest makes them fit really well), how do you make it not horribly compress itself?

.image {
  width: 100%;
  max-height: 300px;
  height: 100%;
}
user1354934
  • 8,139
  • 15
  • 50
  • 80
  • http://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – Sami Jul 22 '16 at 02:27
  • Thanks but the issue I am having is setting the max height. What if I have a skinny image that's like 600x150, but I want to fit it inside max height 300px? – user1354934 Jul 22 '16 at 02:34
  • What if you use , background-size: cover !important; . but this wont distort the image but fill the div. – Sami Jul 22 '16 at 02:41

1 Answers1

0

I think you should be set only width or height to "100%" and another one set "auto" it will be keep image proportion.

HTML : 

<div class="container">
  <img src="xxx.jpg" class="image">
</div>
<div class="well">Title</div>

CSS : 

.container {
  height:400px;
  width:100%;
  overflow: hidden;
  text-align: center;
}
.image {
  width: auto;
  height: 100%;
}

another way you can use background-image property it easy for control background-size.

HTML : 

    <div class="container"></div>
    <div class="well">Title</div>

CSS :

    .container {
      height:400px;
      width:100%;
      background-image: url("xxx.jpg");
      background-size: cover;
      background-position: center;
    }
Tawan
  • 1