**CSS**
.testSVG { background: gray; width: 50%; }
.testSVG img { margin: 10px; max-width: 100%; }
**HTML:**
<div class="testSVG">
<img src="http://www.html5rocks.com/static/demos/svgmobile_fundamentals/images/HTML5- logo.svg" alt="html5">
</div>
SVG Scaling example
In Firefox the parent div (in this example .testSVG) scaled both horizontally and vertically with the scaling .svg image.
However in IE9 the parent div scales on horizontally while the .svg is still scaled both horizontally and vertically.
I liked to duplicate what is happening in Firefox in IE as well. Does anyone have any insight?
Thanks,
Z
I had the same issue, and I followed the answer in a similar question:
SVG in img element proportions not respected in ie9
essentially I removed the height and width attributes from the svg tag.
Removing these tags also happened to fix an issue in Safari where extra spacing was getting introduced.
Related
i updated my website to new picture webp format instead of pngs.
It appears that google insights still is working on previous code, not considering the changes that have been done.
the project is here : https://www.marche-talensac.fr/
If you can see anything wrong, i thank you to have a word in here :)
Regards to you all ^^
The problem is that you are still serving the old image as well as the new image. You will see that your slider is adding the image as a background image via an inline style attribute.
<picture>
<source type="image/webp" srcset="https://www.marche-talensac.fr/css/home2.webp">
<source type="image/png" srcset="https://www.marche-talensac.fr/css/home2.png">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width: 650px; height: 500px; background-image: url("https://www.marche-talensac.fr/css/home2.png");" class="homepng">
</picture>
If you remove whatever is causing that style to be added to your slide it should work as intended.
For clarity remove the code that injects style="width: 650px; height: 500px; background-image: url("https://www.marche-talensac.fr/css/home2.png");"
Also note that you have only updated the home page slider, all the other images are still served as .jpg files.
I am trying to use a SVG with an embedded bitmap as a navigation element. The idea is to make it more mobile friendly. I already have a PNG fallback in place for IE8 and below.
Somehow the embedded bitmap doesn't show in webkit based browsers. SVG without bitmap embedded show just fine.
I can get the background to show in webkit using the "object" tag but then my links don't work, I can't control the width and I run into a documented bug of safari where image is not scaled and sliders appear.
See the page in question here:
http://www.izbornareforma.rs/izbori-2012/
All images are SVG, the four bottom one have embedded bitmap in them.
There are a number of similar question but none have a workable solution.
Suggestions welcome.
G.D.
This is a bug in Webkit. If you keep your current backgrounds and also load the same SVGs in an object tag you will see that the SVG backgrounds will load correctly with the embedded data. To work around this I would suggest you to create an invisible div where you load your SVGs in object tags, such as...
<div id="svgfix">
<object ... />
<object ... />
<object ... />
<object ... />
</div>
Your CSS:
#svgfix {
width: 0;
height: 0;
position: absolute;
visibility: hidden;
}
The corresponding Webkit bug was fixed and rolled-out with Safari 9.
I'am actually working on a responsive design and i'm quite stuck:
I need to set image-type children position to absolute in their div parent, and keep the lower section under this parent. But actually, the only solution i have is to set a fixed height for this parent (in that case, a relative margin for the lower section wouldn't work in a dynamic structure). The problem is that the images, set to max-width: 100%; to keep their dimensions flexible, expand with the page, and the lower section is no more well positioned on resize:
<div id='page'>
<div id='b0'><img /><img /></div>
<section id='s0'><h2>section title</h2><p>hjkhjkhjk</p></section>
</div>
And the CSS:
#page{max-width:1024px; margin: 0 auto;}
#b0{position: relative; height:25%;}/* doesn't work, 100px instead work but responsive design fails */
#b0 img{position: absolute;}
Does anyone have a solution for that ?
Thank's in advance
Simplier solution :
Consists in setting each image to position: absolute; except the last one :
#b0 img:last-child{position: relative;
keeping an element in the "flood" provides its parent the needed height value.
Ok, I now have a very simple mixed solution using Both CSS and Javascript:
As the primary need is "mobile first" design, i've introduced un min-height for the images container in a smartphoine targeted media query css file:
In the head tag:
<link rel='stylesheet' media='screen and (min-width:320px)' type='text/css' href='css/css.css' />
Then the CSS:
#b0{position: relative; min-height:82px;}
And a little bit of Javascript:
$(document).ready(function(){window.onresize=function(){$('#b0').css({'height' :( this.innerWidth * .25)+'px'})}});
So this mixed solution needs Javascript activated, a min-height to be set up for each media query step, and a percentage for the container height calculated with global and maximum page dimensions: in my case:
#page{max-width: 1024px;}
and a container height at about 280px;
Hope this can help someone someday ;-)
I have a flash stuff on a web page, which height I want to control basing on parent's explicitly set height. Width should be recalculated to preserve proportions - as it happens when dealing with <img> tag:
<div>
<object>
<embed src="..."> <!-- no attributes except src -->
</object>
</div>
<style>
div { height: 300px; }
object, embed { height: 100%; }
</style>
Instead of expected behaviour I get the flash of absolutely other size: it is much smaller than it's parent in all dimensions. Actually, I don't understand why it takes this particular size - it looks too small (like zoomed out few times).
To make it to behave in a proper way I have to set both width and height for explicitly. It may be done both inline and in CSS.
The question is: why doesn't it calculate height (though it obviously has enough data - <img> can resize properly at the same conditions) based on parent's height and given percentage?.
(Initially I've had many other attributes (including duplicated width and height on both and tags) which all I removed to simplify the example. While doing that, I was checking whether removement changes anything and it didn't except of width and height attributes.)
I am trying to stretch an svg document inside an DOM in order to fit the window size.
like so:
<div id="y">
<div id="button"> click to zoom</div>
<embed id="x" src="s17.svg" >
<script>
var btn= document.getElementById("button");
btn.addEventListener('click',function(){
var z= document.getElementsByTagName("embed")[0];
var y = z.getSVGDocument();
y.lastChild.setAttribute("viewBox","0 0 "+window.innerWidth+" "+window.innerHeight);
},false);
</script>
</div>
css:
#x{
height:100%;
width:100%;
overflow:hidden;
}
#y{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
}
This isn't working... What am I doing wrong?
All browsers should be able to handle this just fine:
add a viewBox to the svg element (s17.svg in your example) without using script if possible
remove the width and height attributes on the svg element if they are specified
add an attribute preserveAspectRatio="none" to the svg element to make it stretch even if the css-viewport aspect ratio doesn't match the viewBox aspect ratio.
set the width/height of the embed/iframe/object to whatever you want and the svg will automatically stretch to fit
If you don't want stretching then you can also do preserveAspectRatio="xMidYMid slice" (fill whole viewport, slicing away parts if necessary) or preserveAspectRatio="xMidYMid meet" (this is the default, center the svg in the viewport and maintain the aspect ratio).
All browsers handle SVG support completely differently. I think your best bet is to use an object tag instead of embed, and you still have to do some hacking to get it to look right on each browser. This link and this link have some useful information for getting it to work cross-browser.