ok so i have this image and i need it to be she height of it's available space but, at the same time, i need it to overflow in the y axis without losing its aspect ratio. I managed to make it shrink it horizontally without losing aspect ratio (using overflow) but when i strech it too much on the x axis it gest warped. Can you guys help me with that:
<main>
<div class="imageContainer"><img src="../files/img215.jpg" alt=""></div>
</main>
main > div {
height: 85vh;
overflow: hidden;
}
main > div > img {
height: 100%;
min-width: 100%;
object-fit: cover;
}
i tried object-fit: cover;
but i did'nt tget the response i was expecting cause i just need it to crop downwards not evenly
Related
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
i have this website, and as you can see on the index page that we have a 80% width and 100% container and in it a picture. Now there is a problem with different images and their resolutions, some are stretched some are narrow.
I want the pic to be full screen size and 80% width and to have proper aspect ratio. I would probably need some javascript to crop the images? please i need some insights on how to do that. Also a slider can do the trick if it has cropping feature and the possibility of 80% width and 100% height
here is the url
http://tinyurl.com/otwocvz
try removing the image and add the image as header2 background.
.header2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: #CCC;
display: block;
background: url(http://leowd.com/wp-content/uploads/2014/08/leowd-umbrella-red2.jpg) no-repeat center center fixed;
background-size: cover; }
How can the following behavior be achieved?
Start with wide image e.g. 1440px x 378px.
Screen width = 1440px+ image displays normally.
As screen width is reduced the right side (or both left/right) of the image is cropped.
Screen width = 1024px image is fully cropped i.e no additional cropping occurs now.
As screen width is reduced the cropped image reduces in width/height like a standard responsive image i.e. img { max-width: 100%; }
Does using background image solve your problem?
.image {
height: 300px;
width: 40%;
max-width: 1440px;
background-image: url('http://kaboomshark.com/wp-content/uploads/2012/03/xbox-logo-600x300.jpg');
background-repeat: no-repeat;
background-position: center center;
}
Then set your media queries to resize or set the new background image url, size and positioning the image as needed something like so: http://codepen.io/anon/pen/DIAic/
Using a div wrapper:
<div class="wrapper">
<img>
</div>
.wrapper {
max-width: 100%;
width: 1440px;
overflow-x: hidden;
}
.wrapper img {
width: 1440px;
max-width: 140.625%; /* 1440px/1024px = 140.625% */
}
Above 1440px the image will display in full.
Between 1024px and 1440px it will be cropped, but display at 100% scale.
Below 1024px, it will scale down, keeping the same region cropped.
Fiddle: http://jsfiddle.net/MizardX/PB7D5/
If the exact widths are not important, you could leave them off and let everything auto-size. The max-width on the image will control the maximum amount that will be cropped.
I am creating a responsive site and I want to adjust a height based on it's width. This is going to be a parallax & responsive site. For the site's responsiveness, I decided to have a container element be adaptive and adjust size based on media queries. Then, this child will have a width of 90% or so.
I wanted to write either JS or with the help of JQuery to set the height & margins of this based on the new width at each break point. I think this would be easier then trying to set a new "px" height for each of these break points. And since I want to have some parallax effects, I need to set the s margins as % instead of pixels to get the same effect on multiple devices.
Please let me know if any of this doesn't make sense.
Thank you very much.
If you want the width and height to be the same, you could use:
width: 100vw;height: 100vw;
Here is another solution, for a resizable div that maintains a 16x9 aspect ratio. 9/16*100=56.25%
http://jsfiddle.net/ks2jH/512/
CSS:
.aspectwrapper {
display: block;
width: 90%; /* whatever width you like */
background-image: url('http://placehold.it/160x90');
background-size: cover;
background-repeat: no-repeat;
}
.aspectwrapper::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
HTML:
<div class="aspectwrapper">
</div>
EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/