Is there any way to resize an SVG in css that goes beyond the 100% of the original image? I currently have the svg in a img tag and have removed the height and width from the SVG file. Currently I have tried to set the height and width in css but it won't scale up beyond 100%. Any suggestions would be greatly appreciated, seems like this is somehow linked to the viewbox that is set in the svg.
<img class="map" src="map.svg" alt="Map">
.map{
width: 100vw;
}
I seem to have stumbled back upon something I tried earlier and this time it worked! If you move the class up a level to a wrapper then width should work as expected.
<div class="map">
<img src="map.svg" alt="Map">
</div>
.map{
width: 100vw;
}
Related
I am trying to make a landing page consist only of images, basically its more like a banner. But the problem is, when i try to zoom in or zoom out on my chrome the image will resize itself. I have tried using width 100% and height auto but the problem still arise.
Can anyone help me solve the problem ?
Thanks
This is correct, 100% and auto are relative values, you want static, ie set width and heighth to some value via css.
do something like this
<div class="cover">
<img src="/set path" alt="" />
</div>
Write CSS like this way
.cover {
width:100vh;
height:100vh;
float:left;
}
.cover img {
width:100%;
height:100%; /* or you can set `vh` height */
}
so I have an image tag on my page that is set to 300px height. When a bigger image is used for it, the image is stretched so it fits and it gets really ugly. Is there a way to just get a part of the image instead, preferably the top 300pxs of it?
Hope I made myself clear, I'm new to this. Thank you!
I believe
overflow:hidden;
is what you're looking for. You put that property on a div that surrounds the image, not the image itself. Here's a good resource: http://css-tricks.com/almanac/properties/o/overflow/
Here's a code sample:
<html>
<head>
<style>
.overflow{
height:100px;
width:200px;
overflow:hidden;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div class="overflow">
<img src="http://funmozar.com/wp-content/uploads/2014/06/white-cat.jpg">
</div>
</body>
</html>
You could also want to consider using the max-height and max-width properties. Make sure not to set both height AND width on the image or it will still stretch it to match those parameters.
probably the best solution in order to avoid image stretching is to use a div with fixed size (width and height), background-image and use background-size propriety.
example:
html:
<div id="yourDiv"></div>
css:
#yourDiv {
width: 200px;
height: 200px;
background-image: url('yourimage.jpg');
background-size: cover;
}
Please have a look here for other information about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A possibility is to use the object-fit CSS property on the image. For instance, the value contain will scale down the image so that its original ratio is maintained; while the value cover will crop parts of the image. You can then use the object-position property to properly place the scaled down or the croped image.
For more information on these CSS properties and their differents values:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
You can wrap the image in an element, set fixed dimensions for the container and no dimension settings for the image but overflow: hidden on the image. Here’s an example of using small dimensions:
An image:<br>
<img src="http://www.lorempixel.com/100/100" alt="foo"><br>
The same image with just the upper half taken:<br>
<div style="width: 100px; height: 50px; overflow: hidden"><img
src="http://www.lorempixel.com/100/100" alt="foo"></div>
I have an SVG image that I am trying to use in my page that I would like to stretch with page. The same CSS that works with non-SVG images doesn't work for the SVG. As seen in the quick fiddle here -> http://jsfiddle.net/TUby3/
My HTML
<img src="image.svg" id="topHeader">
My CSS
#topHeader {
width: calc(85% + 10px);
height: 46px;
}
I've been trying different things in my CSS but can't seem to get anything to work. When I make the page smaller, the width of the image does get smaller but the height does not stay fixed, the height shrinks in uniform with the width.
Does anyone know a solution to this that does not involve trading the SVG for a PNG or JPEG?
Try this:
http://jsfiddle.net/TUby3/1/
Just put a div with a set height around it.
html
<div id="test">
Your Image
</div>
css
#test{
height:"60px;
}
You could probably achieve the same effect you are after by setting it as a background image to a div and using the background-size css...
background:url(http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%201.svg) left top no-repeat;
background-size:100% 100%;
(That said, Mark's solution works fine for me in Chrome)
I'm looking to place an image inside the .hero-unit that takes up 100% of the unit. This means that it would scale according to the overal window size.
Right now i have the in there, but it looks like there's 100px padding to the right of the image. If i adjust the image max-width: 100% to something larger, it does not scale accordingly.
<div class="hero-unit">
<img src="images/landscape.png">
</div>
Does anyone have an idea of how to remove the padding on the right, but also preserve the auto-resizing capabilities of bootstrap?
As mentioned use the following selector :
.hero-unit img {
width: 100%; height: auto;
}
Working sample : http://jsfiddle.net/basarat/MgcDU/2145/
width: 100%; height: auto; should work, as long as the container div's resizing according to window width is correct.
You can do the following :
Here's one jsfiddle http://jsfiddle.net/shail/5YD2J/1/
<div class="container">
<div class="hero-unit">
<img src="http://placehold.it/1500x400">
</div>
</div>
.hero-unit {
padding:6px;
}
You need to have your image in good resolution , scaling an image with small width and height will lead to bad stretched dimensions and wont look good .
Now I face a problem with defining image attribute height and width as I don't know its dimension from the server. Then I think about assigning width/height to auto.
e.g.
img {
height: auto;
width: auto;
}
but I am concerning about rendering performance images without specific width/height. I would like front end developers here to help with this concern.
Hey now define your img width in 100%
as like this
<div class="imgtagcss">
<img src="xxx.jpg" >
</div>
Css
.imgtagcss{
width:xxx;
}
.imgtagcss img{
width:100%;
}
Give width and height has a 100% in css. So when css is loaded all the image tag will be setted to 100%. This doesn't give any performance effect.