Controlling aspect ratio of images with % width and height of body - javascript

I have these two images appearing in my site that I am pulling from another company's server. I need these photos to scale with the browser window so I've given them a % width and height to scale with the body.
The problem is some of these images are different sizes and I need all the images to look identical to each other. This is easy to do when I know the values of the image's width and height because I can just crop or resize. But how can you maintain a ratio with a scalable width and height?
I think some JavaScript is required to do this. Here's the CSS that I have:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.image {
width: 40%;
height: 40%;
margin: 1%;
}

If you're not concerned about IE8, you can just specify the width. Most browsers will maintain the aspect ratio for you.

Doing it with CSS only will take you a lot of time to optimize for all brosers.
With a few modifications and js you may achieve this using Perfect background image

Related

Images are getting cut off when the website is viewed in a small screen

I have a problem where my images are getting cut off when the height or the width is decreased. I need to make it responsive so I it isn't helping.
I have tried to use media queries but its still not working.
Code - Github
Sample Website - GitHub Pages
Thanks.
It appears the problem is due to the inconstant aspect ratio of the height and width of the images. In the case of the mouse and the gruffalo, both the width and height are set to a percentage of the display resolution. The aspect ratio of the display is typically different compared to the aspect ratio of the images. To fix this, one of the attributes (width or height) should be set to auto in order to take in account the aspect resolution of the images.
The problem with the mouse and the gruffalo can be solved like this.
section #mouse {
top: 38%;
left: 10%;
height: 30%;
width: auto;
z-index: 10;
}
section #gruffalo {
top: 41%;
left: 75%;
height: 30%;
width: auto;
}
The code below fixes the issue of the images being cut off by maintaining aspect ratio.
I hope this response has been of help.
Best regards,
This because you have defined a height, width, and object-fit: cover for your images. Your height and width are both percentages of the window size so they will not always match the aspect ratio of the image. object-fit: cover means that if the height and width of an image do not match the image's aspect ratio, it will scale to the larger of the two and cut off the ends of the image that do not fit.
In order to prevent the images being cut off, you will need to either
eliminate object-fit: cover, or
eliminate either the height or width variable (so that the other one will be automatically determined)
I think the problem in this css:
section #mouse {
top: 38%;
left: 10%;
height: 30%;
width: 15%;
z-index: 10;
}
when you set width 15% the image will be cut when width is decreased.
the same reason for height...
Using percentage in height or width will make it cut.
I think you can use object-fit: contain; and object-position: center; in this image css and convert one of width or height to max-width or max-height.
The same thing for #gruffalo

Proportionally Resizing without extending to 100% width and height

I've build an ad with an click tag. Everything works fine - the images are scaling proportionally but is there a way for the container not to fill 100% of width/height and still be scaling?
Preview:
https://craftads.de/hosting/stack_test5/
Wetransfer Code:
https://wetransfer.com/downloads/5b7b21ccd2a0f535cfcb22146ae5e41b20210823135155/edf6cd
I would like that only the visible part to be clickable.
Visual representation:
This is what I would like to achieve
Thanks for the help!
After a lot of trial and error I think I've found a solution:
html, body {
width: 100%;
height: 100vh;
margin: 0px;
max-width: 50vh;
min-width: 500px;
min-height: 1000px;}
Does that make any sense haha?

iframe behaves like an image element in terms of aspect ratio and responsiveness

There are plenty solutions out there where the width is responsive and the iframe retains aspect ratio but i cannot find a solution that also incorporates iframe height aswell.
In regards to the above solutions out there, if the iframe solution has a parent div whose height can change, the solutions just cuts off the bottom of the iframe if the height is to small instead of being responsive.
I need a solution that applies to the the case when you have a changing height and width of a parent element that the iframe is in, for use across different devices and view port sizes.
The solution should allow the iframe to behave like a responsive image element, that retains aspect ratio when the size changes on both width and height.
I used the media query aspect ratio to get the desired result
You can make your iframe responsive by utilising position: absolute; in the container, however you will need to ensure there is a set height on the container.
.container {
position: relative;
height: 500px;
width: 100%;
}
.container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Change the dimensions of a fullscreen html5 video

Is there a way to modify how the fullscreen functionality of a video behaves in a browser? I would like to display the video on the left side of my screen and an image (actually a PDF) on the right side.
I have tried it with css in chrome:
video:-webkit-full-screen
And that gave me some results, but not the desired one. Should I create a custom action for this? And if so, how can I let the video break out of the borders of the browsers?
You should insert the <video> tag inside a <div> with a defined height and width with the following attributes:
.video-container {
position: relative;
height: auto;
width: 60%;
}
video {
width: 100%;
max-width: 500px; // Or whatever value on your choice
height: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
With a width of 100%, the video would fill the entire browser space but limit how big it can be by setting a max-width or max-height for the resolution and the responsiveness. I hope that my answer helps you!
EDIT
To fit in properly inside a div, you have to assign to the container position: relative and position: absolute to the video itself. If you want to break out from the borders, then you have to tweak the dimensions of max-height and max-widthof the video.
Check this question, since it is similar to yours.

CSS maintain div aspect ratio given height

I've found many responses that answer this question given a width. For example:
Maintain the aspect ratio of a div with CSS
But if I need to set
div{
position: absolute
bottom: 10px;
top: 10px;
padding-right: 125%;
}
those solutions do not work.
How can I maintain the div's aspect ratio when I have the height set as above?
Here's a solution using viewport units. Depending on your audience, this may or may not be the best solution. See http://caniuse.com/#feat=viewport-units for details. Also, depending on the aspect ratio you want, it will go off the screen in some cases. My next suggestion would bring JavaScript into the mix.
Here's a fiddle you can try out: http://jsfiddle.net/Lq7v2gcq/
And the important code:
#vhtest {
position: relative;
top: 5vh;
height: 90vh;
width: 50vh;
margin: 0 auto;
border: 1px solid red;
}

Categories

Resources