CODEWITHSUNDEEP
htmlcssscale
AnthonyK
AnthonyK

Reputation: 13

How to scale image block using only css?

Here is 3 inline blocks. The first one is scalable and the right two blocks has fixed width. In case we resize browser right to block should be visible anyway. #blockID should fit the page, at the same time image should be scalable if we resized window.

I'm trying to make image in first block scalable.

I found several ways to do that using JS, but JS is not suitable because of discreteness. Is there some tricks to do that using only css?

Here is my code (http://jsfiddle.net/t69f60s6/):

<div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID">

        <div style="max-width: 640;">
            <div style="display: inline-block; height: 300px;  max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano">
                <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%;  min-width: 100%;  max-width: 100%; position: absolute; "/>
            </div>

            <div style="display: inline-block; height: 300px; width: 640px; background: #000;">

            </div>

            <div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;">

            </div>
        </div>
    </div>

UPDATE 1: I have changed the cursive text

UPDATE 2: I can achieve this effect using table css. But table is not good. http://jsfiddle.net/6ng62eb7/4/

Upvotes: 1

Views: 4984

Answers (3)

Anthony
Anthony

Reputation: 3218

Try to combine display-block and inline-block like here:

<div style="width: 100%; height: 300px; white-space: nowrap;">
    <div style="width: 100%; min-width: 641px; ">
        <div style="display: table-cell; width: 30%; height: 286px; background: #ffff00; max-width: 350px; vertical-align: top;" id="pano">
            <img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" max-width: 90%; margin: 5%; " />
        </div>

        <div style="display: table-cell; width: 70%; min-width: 641px;">

            <div style="display: inline-block; width: 641px; height: 286px; background: #000;" id="content">

            </div>

            <div style="display: inline-block; width: 60px; height: 286px; background: #0044ff;" id="basket">

            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/rfh8dgqu/

I'm not sure about cross-browser compatible but it works in chrome

Upvotes: 0

Miha Šušteršič
Miha Šušteršič

Reputation: 10052

You need to give the image a max-width: 100% . This will scale the image in regards to it's container. Then you need to scale the container the image is in. For now you have set <div style="max-width: 300px; width: 100%;" id="pano"> for the parent div, so the img inside will only total to 300px at max.

You also have the overall container set to <div style="max-width: 640px;">, which means that all 3 of your elements together will never be bigger than 640 px.

This is why you only see your image scaling when you make the browser window smaller.

Bottom line is, you have to make the whole element (including its container responsive or this won't work) - you have to use % instead of px, em... when defining box size. This also means the other two elements you want to keep to the right have to be in % (and all 3 need to add up to 100%.)

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Try giving the image only a max-width of 100%.

So change:

<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%;  min-width: 100%;  max-width: 100%; position: absolute; "/>

to:

<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style="max-width: 100%;"/>

Updated Fiddle

Upvotes: 1

Related Questions