Is it okay to set my height and width at 100vh and 100vw as a standard? Is this good practice? Is there a reason not to?
Related
I want to scale an image to fit or fill certain width while keeping the aspect ratio.
For example, when the server receives 1200x800 image without knowing the image size and I want to scale it down to 300x200 by specifying only width=300.
Note that I would specify either width or height, not both.
Also, I wouldn't want to scale up to make it bigger size, if the original image is small.
resize_to_fit does what I want.
Even though, doc says both width and height are required, you can actually perform scale_to_fit effect by providing either only width or only height to resize_to_fit function.
I have two divs with width of 30% and 70% and fixed height as height:100vh; Because the project needs to have the slider to be always the height of the screen you are looking at.
But I cant seem to figure out how to fix the aspect ratio of the images? As you can see in the test link that the images are narrow?
here is the link : [broken link removed]
note that this is the prototype that I am building so its still ugly as **** :)
and sorry im not too good at coding (still learning)
Your image is stretching because you've set both the width and height to 100%, so the browser is making the image width fit the div width (which is thinner than the aspect ratio of your image).
The quick fix is to amend your CSS as follows:
.cycle-slideshow img {
width: auto;
height: 100vh;
}
This tells the browser to set the height to 100% and then resize the width accordingly to keep the image the correct aspect ratio.
Although, you may want some fall back for if the browser window is much wider than it is tall, as then you'll see the edge of the image.
Is it possible to reduce width and height of fillPatternImage in circle as we wish which is based on radius?
please let me know.
Yes, you can use the fillPatternScaleX and fillPatternScaleY properties to adjust the pattern's scale factor.
I implemented the following plugin into my website http://tympanus.net/codrops/2011/04/22/animated-skills-diagram/comment-page-3/#comments
Unfortunately the set width of the svg used is 600px x 600px. I tried to overwrite the size to a smaller one of 350 px, but it did not work. is simply cuts off a part of the svg. Could anyone give me advise on how to make the animation smaller?
Thanks in advance,
Ev Chen
You can use a viewbox to scale the svg. Set the svg container to the size you want that normally causes cropping, and then set the viewbox to be 600px x 600px, allowing resizing
http://raphaeljs.com/reference.html#Paper.setViewBox
paper.setViewBox(0, 0, 600, 600, true)
This will fit the specified region (600 x 600) into the container.
I'm developing a Web site for a professor and I'm having an issue with my CSS in Firefox. The Web site was designed to be fluid width/height so it would fill the screen on any resolution, so because of that I'm using a lot of percentages for heights and widths. I've run into a problem with images however.
http://projects.mediabounds.com/i.bradley.edu/
The top bar of thumbnails should scale the images, but it doesn't work in Firefox, the images stay 100% their original height. It works fine in Safari (don't know about Internet Explorer). I've set the height to 100% and width to auto. I expect it to scale the image to 100% the height of the div and then adjust the width accordingly.
Can anyone point out what I've missed?
You need to give the image a height of 100% but it's parent element needs to be the desired height and width in percentage.
Basically make a DIV containing the image, give the DIV the desired width and height in percent or px. Place the image inside the DIV and give it 100% height.
That's just the way Firefox handles images.
I bumped into this as well and I managed to get a consistent height across multiple browsers using vh units in CSS, for example max-height: 5vh; as in 5% of the viewport height.