CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Ryan
Ryan

Reputation: 29

Getting image to scale/center dynamically with window

On a webpage, I have 5 image links, laid out like the 5 side of a dice. The 4 corners all come together in the middle, and the center image lays on top (it's going to be a "home" button).

I already managed to get the 4 corner images to stay together while remaining centered and scaling down with the window (as seen HERE), but the problem I'm having now is getting my top layer image to do the same thing.

<script>
    $(window).resize(function () {
        if ($(window).width()<=1346) {
            $('.rowdiv').find('img').css({ 'width': '100%' });
        }
        else {
            $('.rowdiv').find('img').css({ 'width': '673px' });
        }
    });
    $(window).resize(function () {
        if ($(window).width()<=1346) {
            $('.rowdiv2').find('img').css({ 'width': '100%' });
        }
        else {
            $('.rowdiv2').find('img').css({ 'width': '220px' });
        }
    });
</script>

Is the fact that I have 2 different resize functions negating my second one?

Upvotes: 0

Views: 132

Answers (1)

BenM
BenM

Reputation: 53198

You can use CSS media queries to achieve this quite easily. For example:

.rowdiv img { width: 673px; }
.rowdiv2 img { width: 220px; }

@media (max-width: 1346px) {
    .rowdiv img,
    .rowdiv2 img { width: 100%; }
}

Please see this jsFiddle demo, or the full screen result.

Upvotes: 1

Related Questions