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.
Related
I'm rendering a somewhat complex WebGL scene here. When I view the scene on my MacBook Pro's built-in display in full screen it renders smoothly at 60 frames per second. When I view the scene on my external monitor in full screen, the frame rate drops considerably and becomes very choppy.
The native resolution of my display is 4K and it's running at 60Hz. My iGPU is an Iris Plus 640. I'm using DPI scaling and Chrome detects a resolution of 2560x1440 with pixel ratio 2. I'm setting the canvas size to 1280x720 and this is static irrespective of its presentation size. I'm using CSS to scale it up to full screen with a 16:9 aspect ratio using these rules:
canvas {
width: 100vw;
height: 56.25vw;
max-width: 177.78vh;
max-height: 100vh;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
I'm setting image-rendering: pixelated because I noticed a small performance and visual improvement. My understanding is that the final step of rendering is to copy the frame buffer to the visible canvas. If the canvas is larger then it interpolates in-between pixels and this has a cost. Setting 'pixelated' is a bit like using NEAREST filtering and is therefore faster.
When I create the WebGL context I'm disabling things I don't need:
canvas.getContext('webgl', {
alpha: false,
depth: false,
stencil: false,
antialias: false,
powerPreference: 'high-performance',
});
I've followed most of the advice here. I'm using instancing with a texture atlas, I've tried to minimise state changes. Attribute 0 is enabled, etc.
I don't think the problem is in my shader since I'm rendering at a fixed size of 1280x720. Therefore, if I had too much overdraw, for example, shouldn't that also affect the performance on a smaller canvas size (like on my MacBook Pro's display)?
I'm really not sure what else to try. I've scoured the web and tried many things like using CSS transforms to scale the canvas instead of width / height. I've tried setting the zoom property. I've also spent a while looking through the performance tab in Chrome and (tried) to go through about:tracing. I've seen a few bug reports specifically about Chrome but I see the same problem in both Firefox and Safari. Have I just reached the limit of how large a WebGL canvas can be (for my GPU)?
I'm sure I've seen other WebGL demos that upscale fine to full screen so I'm really confused. What's going on?
Is there any way (with CSS) to make the image to cover a div element, but only if it can be done without overriding the original dimensions on upscaling?
That to prevent pixelated image. Object-fit 'cover' upscales even too small images. And 'contain' don't push the image to cover the div.
So, is there a way to accomplish what I want?
Edit:
Seems that even 'contain' works that bad way. It upscaling the image to the parent element's edges even if that makes the image bigger than the original. That's crazy...Isn't it?
And I'm trying to see if it's possible to at least add image sizes in Wordpress by just the aspect ratio, not an exact size. I just want to change, crop to a given ratio for the image. That could at least help a bit. But no, there's no function for that. Just the image editor you can use after the upload...
Where is the responsive thinking? Isn't aspect ratio the future, not pixels?
I did a bit of research and can offer you this solution:
Image needs to be a background-image
Set a fixed width for the background-size + auto
(optional) you can center the image for aesthetics
In this example the .img-container is also flexible (20vh) and crops the image if it gets smaller then 100px. The fixed background-size value prevents the image from scaling up aswell.
created a jsFiddle to check the flexible container
.img-container {
width: 60vh;
height: 60vh;
border: 2px solid #111;
background-repeat: no-repeat;
background-position: center;
background-size: 100px auto;
background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}
<div class="img-container"></div>
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.
The problem:
I have a set width and height image Lets say height:160px; width:200px; with an image in each box.
The image can vary in size but I need a solution that will always center the image vertically and horizontally within the box no matter what it's size.
Horizontal doesn't seem to be a problem by using margin: 0 auto but vertical is proving difficult. I have tried vertical align: center but this doesnt appear to work either
Any help is appriciated
Thanks
center is not a valid value for vertical-align (you're probably confusing it with middle). Still, vertical-align isn't the correct method here and is often a misunderstood property. I've recommended the following site a few times and it should help you, too:
http://phrogz.net/css/vertical-align/index.html
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.