My Monkey Do

A Log of Coding Solutions

image

SVG height not scaling properly on IE 10

by

Problem

IE 10 shows a skewed svg image who’s width is set to a specific value and height is auto.

 

Solution

The problem is the width and height in the SVG file is set and IE is following those specs if you don’t set it.  So if you’re image is 100×100 and you set only the width to 50px, the height will remain at 100px.  The solution is to remove the width and height attributes in the <svg> tag.

Caveats

A solution on a github gist suggests that removing the width and height attributes force the image to occupy the full width of its container in non-IE browers.  All my current images with SVG are supposed to fill the width so this isn’t a problem for me.
Link to the gist: https://gist.github.com/larrybotha/7881691

Get the YouTube Thumbnail Image

by

To get the YouTube thumbnail image, you would either use their API or a simpler method would be to use this format of the url:

http://img.youtube.com/vi/VIDEO_ID/#.jpg

Where VIDEO_ID is the last bunch of characters after “v=” in the URL: http://www.youtube.com/watch?v=0TflnHlQMt8

# is the thumbnail number.   The choices are 0, 1, 2, 3.  0 is the default full size image (480×360).  2 is the default small image (120×90).  1 and 3 are other optional small images that is not the default thumbnail.

source: http://www.reelseo.com/youtube-thumbnail-image/
search terms used: youtube get the image

 

Resizing Background Image

by

Demo: Resizing Background Image Demo

Problem:

I’ve been given a project to make a background image resize with the browser window size while retaining its ratio, not causing scrollbars, and always filling up the whole window.  It seems pretty easy until you actually see it.  Here’s a real life example of it:  http://ringvemedia.com/.  As you can see it pans as the browser is resized larger until a certain point and then it expands.  It never breaks its width to height ratio.

Solution:

The solution is quite simple.  It only involves using some CSS and a table.

First we need to make sure the image doesn’t overflow and cause scrollbars.

html,body,#bg,#bg table,#bg td {
    width:100%;
    height:100%;
    overflow:hidden
}

Then we need to center the div and make sure it’s not too small.

#bg {
    position:absolute;
    width:200%;
    height:200%;
    top:-50%;
    left:-50%;
}

Finally, center the image. I’m not exactly sure why a table is needed in the html, but it does work better in filling the window with it in.

#bg td {
    vertical-align:middle;
    text-align:center;
}

#bg img {
    min-height:50%;
    min-width:50%;
    margin:0 auto;
}

This is some pretty unique css coding and I’ve seen it in a couple places.  Surprisingly (not), it’s the same code at both sites!  I wonder who copied who?  Well, I can’t say I didn’t do that either.