This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

Optimizing Images for Retina in JumpStart2.0

  • Creator
    Topic
  • #19747
    cfunkyk
    Participant

    Hey J,

    So I am setting up a retina image solution in your new digs. I am using the html replacement method. In using this, we are uploading the image and using it as full-size. This is causing the class size-full to be added to each img. This class in themeblvd.css –>
    img.size-full applies a width:auto property.
    This is causing the 2x image to show at the 2x width.
    Is it necessary to have the width:auto applied to that class .size-full?
    I think that the height:auto on img is required for responsive images, but when I remove that it fixes it too.

    This is probably out of your scope, but I am wondering if you had to put that width:auto on the size-full class for a particular reason?
    What are my options here for accomplishing this? I just need the 2x image to sit in the same dimension as the regular image when I alignright or alignleft.

    Please let me know if this makes sense and if you can help. No worries if you cannot.
    Thanks for everything!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #19748
    cfunkyk
    Participant

    Sorry, should have dug a little further earlier…
    width: auto; /* Prevent stretching of full-size images in IE8 */
    I see why you must have that now.
    What do you suggest as the best way of being able to get this to work properly now…?
    I have read about possibly needing a container div around the image to set the width so the retina image will not step out of line – but this seems pretty cumbersome.

    Thanks for any suggestions or input.

    #19753
    Jason Bobich
    Keymaster

    What about something like this from your child theme’s stylesheet? Does this work?

    img.size-full {
    	width: initial;
    	width: auto\9; /* Only apply to IE 7/8 */
    }

    The theory there is that you’re putting the width back to the initial value. Then, applying the width:auto back with a CSS hack to target only old IE8.

    http://css-tricks.com/snippets/css/browser-specific-hacks/

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.