• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

image

SVG height not scaling properly on IE 10

November 14, 2017 by Webhead

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

Filed Under: Coding Tagged With: IE crap, image

Best way to detect Retina with Javascript

May 20, 2014 by Webhead

Best way according to W3C standards:

http://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript

Filed Under: Coding Tagged With: image, javascript

Get the YouTube Thumbnail Image

October 13, 2011 by Webhead

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

 

Filed Under: Coding Tagged With: image, youtube

Resizing Background Image

May 12, 2011 by Webhead

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.

 

Filed Under: Coding Tagged With: css, image

Primary Sidebar

Topics

apache apple block editor chrome cms css debug eCommerce embed firebug firefox git gmail goDaddy google hosting htaccess html html 5 IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php php 5.3 responsive rest api seo svg tinymce woocommerce wordpress wpengine xss yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools