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.
Related
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
I have a css issue where the product image containe for images, both portrait and landscape, with different heights does not adapt to fit the height of the actual image. The container height is based on the tallest image. See attached.
I have used the the following css on the container, but cant get adjust theigh height (shown in light blue)
Thanks
#image-23714742567097-0 {
width: 925px !important;
max-height: 550px;
object-fit: contain;
overflow: hidden;
}
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; }
I have a large image whose height is bigger than the screen height. I have no problem with the width. I need to crop it so that the top 65% of the screen contains this image.
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
If I write a CSS as below, the whole image gets compressed to fit in 65% screen. Moreover, if I resize the screen, the image automatically starts attempting to fit in the top 65%, making the whole screen look disturbed.
body, html { height:100% }
img.img { height:65% }
I want instead, the image to be cropped so that the leftover fits in the 65%, and then it stays that way. That is, if I now resize the window, let the vertical scrollbar appear. How can I achieve this?
(PS: I didn't want to give a fixed height because I want the webpage to be viewed in different devices like mobile phone and iPads too.
I think this is what I need:
Get the maximum height of the device (not the current height of the browser screen as the user might have minimized it for some reason)
Crop the image in such a way that it fits the top 65%, and display it
Keep the image size that way irrespective of the user changing the screen size
But I am not sure how to achieve it.)
Is this what you are seeking: http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
Note that the image is now a background-image and is leveraging the background-size property which is not supported in IE8 (...who cares?). If the image cannot be a background image, you scale a div proportionally to fill the width using a padding hack (Proportionally scale a div with CSS based on max-width (similar to img scaling)) and have the inside image set to 100% width and height.
Maybe this can be useful to you:
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
Also a search for css cliping property here or in google should bring enough info
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/