3

I'm sorry to ask this again, but my search has not revealed anything that I have been able to implement. I have an image inside a div with the following styles:

<div class="thumb grid_6">
    <img src="img/test2.jpg" alt="flavin" />
</div>

.grid_6 { width: 50%; }

.thumb img {
display: block;
max-width:100%;
max-height: 100px;
width:100%;

I'd like the image height to be locked at 100px, with the width remaining at 50%. Ideally the image would keep its aspect ratio, and just crop to the required size to fit the thumbnail. I'd rather not get into js, unless there is a much easier way to do it using js. I apologize for my lack of experience in coding.

Any help would be much appreciated.

user3379832
  • 33
  • 1
  • 5

2 Answers2

1

This should be what you are looking for:

FIDDLE

CSS:

.grid_6 {
    width: 50%;
    height:100px;
    overflow:hidden;
}
.thumb img {
    display: block;
    width:100%;
    height:auto;
}
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Ah! Fantastic! Thank you very much. Never thought of defining the width in the grid_6 class. Thank you for your answer. Do you also know how I would go about centering the image inside the div? – user3379832 Mar 04 '14 at 16:41
  • @user3379832 glad I could help. If you need to verticaly align the image it is very difficult with CSS and I don't know the solution, you could ask a new question about that. – web-tiki Mar 04 '14 at 16:52
0

Is this what you want?

.grid_6 {overflow: hidden; }
.thumb img {
    height: 100px;
    width: auto;
}
Chris Broski
  • 2,421
  • 27
  • 23
  • In this case, the image shrinks to whatever width keeps the aspect ratio at height:100px. I'd like the image to cover the full width of the container, which is 50% of the body. – user3379832 Mar 04 '14 at 16:31