I'm trying to scale an SVG according to user's viewport width
I have this css:
.thesvg {
padding: 0;
line-height: 0;
margin: 0;
width: 50%;
max-width: 360px;
}
It scales as it should horizontally, and the aspect is kept
But it adds whitespace/padding to the top/bottom (and maintains original element height) instead of scaling down entirely
But only in some browsers.. or I think so (maybe because of different viewport sizes)
Is this a bug? Or how can I fix this and achieve a perfectly fluid SVG just by managing the width (if possible)?
Related
Working on a Drupal website where different sized images can be added to any single node.
I have the following css to resize images to manageable sizes:
img {
width: 100%;
height: auto;
}
But that obviously applies to all images regardless of their width or height.
Is there a way to apply media-queries or some other strategy to filter images over a certain width or heigh and apply the styling above to them ?
It sounds as though you want to limit the size of img whatever the media, viewport, dimensions are so I don’t think media queries will help you.
But you can limit width and height so imgs will take on their natural width and height if they fit, otherwise they will go up to but not beyond the viewport size.
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
I have been reading many solutions to this and tried most of them, but unfortunately I cannot get it like I want it working for all browsers.
What I basically want is to automatically crop images (from the center) to a defined aspect ratio. This should apply to "portrait" images (cropping on top and bottom) and also to landscape pictures (cropping left and right). It has to be responsive so that the images will always have the desired with (and height using the aspect ratio).
It is described well here: Center Crop Images but as in that solution I do not know if the picture will be to wide or to high.
I also cannot and don't want to work with background images.
I could get it to work to crop on top and bottom but when the image is wider than the desired aspect ratio it will "crunch" the images to look distorted.
Here is one of the solutions that worked partly:
/* wrapper div */
.iw-so-article-thumb {
position: relative;
overflow: hidden;
/* text-align: center;*/
/* ensures the image is always in the h-middle */
border: 3px solid black;
}
/* create an aspect ratio of the wrapper */
.iw-so-article-thumb:before {
content: "";
display: block;
padding-top: 100%;
}
.iw-so-article-thumb img {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
margin: auto;
display: block;
min-width: 100%;
min-height: 100%;
object-fit: cover;
/* necessary to fill the frame/rescale the image */
}
This worked using "object-fit: cover" but not in IE/Edge as I found out (there pictures will be "crunched" when cropping should happen on the sides.
Like I said I tried many other solutions I found in forums/blogs but some didn't even work at all.
I suspect the cropping on the sides for wide images fails because the aspect ratio in the image wrapper is defined by the ratio of height to width, so the wrapper will take a responsive width and adapt the height (then crop by "overflow: hidden"). But when the image is wider than the aspect ratio it cannot handle this.
I am not sure if there is a pure CSS solution that works for all browsers including IE/Edge, I suspect there isn't, but I am happy to be taught otherwise.
I have an svg that is set to 100% width, filling a container. The container is set to 100% of the body, so that when the browser window is narrowed on the x-axis, the svg shrinks so that it remains at 100% width and scales down accordingly.
However, when I then shrink the window on the y-axis, the svg remains as is. I want it to always remain with constrained proportions (i.e. a square remaining at 1:1 under all circumstances), but scale to be 100% of the smallest axis.
.svg-container {
position: relative;
width: 100%;
height: 100%;
}
.svg {
width: 100%;
height: 100%;
}
At the moment, it shrinks on either axis, but it will become rectangular either way, defeating my objective of maintaining the original aspect ratio.
Can anyone offer a solution that maintains aspect ratio, as well as maintaining 100% of the smallest axis on the viewport?
I think, because your container is 100% of the page height, your .svg is getting squished. Try this...
.svg-container {
position: relative;
width: 100%;
height: auto;
}
is there any way to resize both width and height of a div in correlation with the browser resize using css? I have already achieved width resize but can't find how to resize the height in correlation.
Use viewport-percentage lengths:
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
If you wanted to create a square that maintains an aspect ratio, you could use:
Example Here
.maintain-aspect-ratio {
width: 25%;
height: 25vw;
}
These lengths are supported in most modern browsers - support can be found here.
If you want an alternative with more browser support, you could always use the padding-top trick to maintain the aspect ratio.
Alternative Example
.maintain-aspect-ratio {
position: relative;
width: 25%;
background: red;
}
.maintain-aspect-ratio:before {
content: '';
display: block;
padding-top: 100%; /* 1:1 ratio */
}
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 6 years ago.
Im making a responsive design, which has to keep the proportions of its elements (height to width) no matter what the screen size is, so i don't know the size in pixels for any of the elements and i can work only in %.
I can set either the width or the height as a % of the browser size, but the i have no idea how to set the other property value.
That using only CSS, making JS calculate the values is not an option.
I came across this problem last year and found an obscure solution after some tedious researching. Unfortunately it involves wrapper DIVs. The structure is simple - you have a parent DIV which contains the contents container and another DIV that sets the proportions. You set the margin-top of the 'proportion' DIV as percent of the width of the parent... Example:
#parent {
position: relative;
}
.proportions {
margin-top: 75%; /* makes parent height to 75% of it's width (4:3) */
}
.container { /* contents container with 100% width and height of #parent */
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
http://jsfiddle.net/twpTU/
Use CSS calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
It has pretty good adoption for modern browsers http://caniuse.com/calc as a fall back use CSS media queries and have min widths and heights to fall back on.
Obviously you could always just calculate both percentages in advance.
Div1 needs a height of 60% and the width needs to be 1/4th the height. 60% * .25 = width: 15%
div {
position: absolute;
border: 2px solid black
}
#div1 {
width: 40%;
height: calc(40% * 1.2);
}
#div2 {
width: calc(90% / 4);
height: 90%;
}
http://jsfiddle.net/pU4QA/
First, I know that the OP has clearly mentioned that he is not looking for any Javascript approach, however I think it might be useful for couple of people who are still open to use Javascript as well.
Here is the answer; To set the size for both width and height in the same percentage, you can set the width of the parent element to width: 100%; via CSS, then with Javascript you set the height of the parent to the size of width. Then you would have a square-shaped element as the parent.
Now you can apply both width: 10%; height: 10%; to the child elements. Then only things you need to do in order to keep it responsive is to listen for the window resize event and then you apply the height again only to the parent, and all children will be updated.
http://jsfiddle.net/sDzHb/
Something like this will keep it responsive to the browser size:
$(window)
.resize(function() {
var w = $(document).width();
$('.parent').height(w);
})
.trigger( 'resize' );