I am trying to write code that either 'contains' or 'covers' an image based on browser dimensions. Everything works as expected with the exception that if the height of the window is lesser than the width, the image get cropped even when using contain.
I have the following CSS code:
.object-fit_cover { object-fit: cover; width:100%; height:auto;}
.object-fit_contain { object-fit: contain; max-width:100%; height:auto; }
My HTML code to show an image
<img ng-src="<myimage>" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" />
When the height is larger than the width - things are perfect, like this:
But when I stretch the width to be larger than the height, it crops the image, even if I switch to object-fit:contain
What I really want is, if I am using class="object-fit_cover" then the image should fill the window and if I switch to using class="object-fit_contain" then the image should always show in its entirety - this does not happen in the second example I sighted above.
Thanks
Related
I'm trying to make a website and I want an image (1920 × 1080) to cover the whole page. I used:
background-repeat: no-repeat;
background-size: 100%;
And it looks fine. But when I resize my browser and pull it down vertically, the image does not come with it. I want my picture to resize for example like this site: https://www.okainsbayseafood.co.nz/ (when you resize the browser vertically the image goes with it)
Sorry for my English and if I sound stupid
my webpage
Switch background-size from 100% to cover:
background-size: cover;
This tells the browser that the image should fill the available space, and will alter the dimensions of the image to do so.
Note: If you are adding this CSS to an element that is not the body tag, you may need to add additional code to resize the element to which you are adding this background. This CSS will create the desired effect if added directly to the body element.
Actually you have many possibilities to get such a result:
The page you linked above uses so called breakpoints, where it loads a resized image based on the screen size. This is indeed a good idea in that case, because they use very large images, which would load forever on small screens and low bandwidth.
For you, as a beginner, it is probably better to firstly get some deeper knowledge into CSS and what you can do with just a single image, and after that you can opt in to optimisations like the site above. So for you something like that would probably work:
background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */
Study that CSS code and make sure you understand what it does and what other options you have. You might play around with some values there and get some other results.
Users are able to upload an image that get displayed in a square container in the UI. The problem is that they can upload images of any size so they may be to small, portrait, landscape or some odd aspect ratio. Images should always fill the container and be centralli positioned.
I would like to style these images so that smaller dimension is always of specified size while keeping aspect ratio as is.
Suppose I want my images to have resulting dimension 50px (smaller one should):
Portrait image: 100px(w) x 200px(h) => result: 50x100
Landscape image: 200px(w) x 100px(h) => result: 100x50
Square image: 100px(w) x 100px(h) => result: 50x50
I want my images to be at least 50px in either dimension. Using max-width and max-height resizes images to at most 50px...
Requirements for original solution
CSS only
Images should be IMG tags, and not placed as backgrounds
No Javascript
I've tried using max-dimension styles but using this I can always control just one dimension. I want to control both simultaneously.
Requirements for plan B solution
It's possible that original solution restricts too much with its requirements. In this case I would be using CSS backgrounds as described in this question. The problem is that my images aren't defined during design time, but rather during runtime as users are selecting images and I'm using FileAPI to display them before uploading to server. This would require me to define inline styles and I'd like to avoid that.
Resulting solution
Unfortunately it isn't possible to resize images directly using only CSS. And with images I mean the IMG elements. This functionality is otherwise supported for element background images. And IMG elements are no different in this regard so we can actually set backgrounds on them too. My image therefore displays a transparent image and has a background set to what image should display.
This is the solution I ended up using:
img {
height: 50px;
width: 50px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
I'm programmatically setting background image using inline CSS as images are read using FileAPI from local file system and I'm using data URI to set them as backgrounds.
Works...
try this css for image tag:
img{
max-width: 100px;
max-height: 100px;
}
in this case you have Portrait and Landscape images as you want(with keeping their aspect ratio).but only Square are stayed 100*100.
here is a fiddle .
I am having this issue at: http://bananabay.dejaloasi.com/ where when i zoom out the image of the slider get cuted and won't allow to see correctly. I've already read and try this Zoom in/out how do I keep the aspect ratio?, applying the height auto on the img and both of max width and height. But still haven't got the expected results. Any help would be very helpful.
Try adding this css:
.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img {
width: auto !important;
}
This will get the image maintain proportion but on large screen image wont expand to cover entire screen & it shouldn't cuz it gets pixelated if stretched
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
A few weeks ago I working on this site. This is my next portfolio site. I want to make this structure, when I finish:
Header
Horizontal image gallery with floating height
Footer
I want to create something similar, just like the 22slides.com portfolio sites for photographers. If you change your browser's window size or press full screen button, the img element or the image's div automatically change his height.
I putted in the CSS a "max-height" parameter, to prevent the images never become bigger than their original resolution. It's a serious issue on huge resolution screens. but in Chrome it's not working properly, because the aspect ratios become wrong. If you press full screen, the aspect ratio more bad. In every other latest browser (Firefox, Safari, Opera, IE8-9) working normally. I created a custome CSS only for chrome with this command (but now I uncommented this in HTML to show you the Chrome aspect ratio problem):
#portfolio img { max-height: none; }
So with this line, the images using the biggest possible height in Chrome and the aspect ratios are correct. But it's a problem for me. I not want that a 1024x683px image showed bigger than his actual resolution on a FullHD monitor.
I think the best solution, if there's a javascript, which is dynamically escribe a width and height for every single image and keep the original aspect ratio. 22slides.com using something similar javascript, but I'm not a javascript programmer at all. :(
The images HTML structure:
<div id="portfolio">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
</div>
CSS (max-height is very little number, just to show you the problem in Chrome):
#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }
I'm using this Jquery Javascript to dynamically change the image's height and bring back the image's overflow on the screen with 130px negative height. Probably not this script causing the problem, becuase if I turn it off, the aspect ratios are more bad in Chrome:
// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
$(window).load(function(){ // On load
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
$(window).resize(function(){ // On resize
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
});
I need help! Thank You!
Update:
This javascript written by "Emphram Stavanger" and "nick_w" seems to solve my image fit to browser height problem:
Imagefit vertically
I tried and it's perfectly working with one single image. The image fitting in the available viewport window perfectly, with correct aspect ratio! There is a visual explanation for our problem made by "Emphram Stavanger":
http://www.swfme.com/view/1064342
JsFiddle demo (Basicly it's Emphram Stavanger's code, I just putted in the changes by nick_W, changed Jquery to latest and I putted after the show link:
http://jsfiddle.net/YVqAW/show/
I not tried yet with horizontal scrolling image website, but it's already a big step!
UPDATE 2:
SOLUTION: https://stackoverflow.com/questions/20303672/horizontal-image-slideshow-javascript-not-working-properly-with-portrait-oriente
(And I need help again...) :)
A little late but you can use a div with background-image and set background-size: contain instead of an img tag:
div.image{
background-image: url("your/url/here");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally.
The background-size property is ie>=9 only though.