Question

I need to show a picture and text next to it, but the problem is that the picture is too big and I need to reduce it by setting custom width and height.

CSS:

#list{
    max-height:200px;
    overflow-y:auto;
    padding:5px;
    /*display: none;*/
}

.info{
    border: 1px dashed #CCCCCC;
    margin-bottom: 5px;
    padding:0 5px;
    overflow: hidden;
    cursor: pointer;
}

.info .image{
    width:20%;
    height:30%;
    display:inline-block;
    margin-right:20px
}

.info .image img{
    width: 100%;
    height: 100%;
}

.info .text_data{
    display: inline-block;
}

HTML:

<div id="list" class="select_block">
    <div class="info">
        <div class="image">
            <img src="https://dl.dropbox.com/u/14396564/screens/screenshot.jpg">
        </div>
        <div class="text_data">
            <p>
                Name: Some name
                <br />
                Start: 2012-05-17 04:43:40
                <br />
                End: 2012-05-17 04:43:40
            </p>
        </div>
    </div>
</div>

http://jsfiddle.net/nonamez/e5hyX/

In Firefox it’s like

In Safari (probably in chrome is the same)

So I need something like this (hover on the picture shows it in full size, so I only need a list of previews, but with percentage).

Answer 1

If you only set the height or the width, the browser will scale the image in proportion to its natural dimensions. If you need to make sure that it stays inside a given area, make sure you use the max-* properties. For example:

width:50%;
max-width:100px;
max-height:80px;