I'm having some weird behaviour with chrome regarding image resizing when the window is resized.
When Chrome is snapped fullscreen in Windows(double click the window to snap full screen), and I unsnap the window, causing it to revert to whatever previous size it was unsnapped, images are not being scaled properly.
For example, I have the following css code that resizes images to 100% height of the space available, and auto's the width:
img{
height: 100%
width: auto;
}
When the window is snapped fullscreen it looks fine, the aspect ratio's of the images are kept. But now if I unsnap the window (double click). The height will resize, the width will not, like below:
Whereas in Internet Explorer, unsnapping looks like this:
Anyone know why chrome is not resizing properly? Or is there something wrong with my css?
If you need more code please ask.
Thanks.
Use instead width:100% -> max-width:100%;
I had before this issue once, and I have used both properties of size
img{
max-width:100%;
max-height:100%;
}
It works for me just fine, and save the proportion.
Related
I just noticed today that my site is suddenly not filling the width of the screen.
[link removed]
If you scroll to the right, you will see dead space from the top to the bottom. I have tried adjusting the screen resolution, and double checking all css rules pertaining to page max-width, but I can't seem to find what is causing the issue.
How can I get my main container to fill the width of the page?
Try adding this to your css, this should force your view to 100% while disabling horizontal scrolling.
html, body {
max-width: 100%;
overflow-x: hidden;
}
edit:
this worked in my web-inspector but I had to add !important to both settings. It looks like bootstrap is overriding your stylesheets. It's hard for me to tell because I am on my iMac and don't have access to my PC right now. Good Luck!
I'm looking for a way to put two portrait images on the same line, and keep them there, even if I resize the window, they should resize too...
Any idea how I can accomplish this?
Note: I'm looking for this info to use on tumblr.
OK, so your question is a bit weird and hard to understand. Might wanna fix that.
If you're just wondering how to make the images stay on a line and resize with the browser window, you can assign them a width value with a % property.
Like this:
JSFiddle
img {
width:30%;
/*
eventually max-width and/or min-width
*/
}
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
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.
A page I'm working on has a div that spans its width. Its height has to resize according to the browser window. Here's how I've got it so far:
#vid_window{
position:absolute;
float:left;
background-color:#000;
width:100%;
height:57%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
At the bottom of the page is a 'menu' to play an assortment of videos in the above div, and the video, of course, will have to resize with the height of the div. The div is absolutely positioned, per the client. That's not a problem:
#vid{width:100%;height:100%:}
As it will fill #vid_window
Here's the problem: When the browser page resizes, it doesn't take long for the 'menu' to begin overlapping the vid window. I know I can reduce the percentage, but, I may not, per the client. They want the lion's share of the page to be able to display the video, but they, of course, don't want the menu to overlap the window or the vid.
Here's the question: Is there a way to have the vid_window and vid resize exponentially according to the browser window, such that if the window is fully expanded, the vid_window is at 57%, but if it's half-size, the vid_window would be, say, 30%?
Here's a link to the page, if you'd like:
page
From what you've described, it sounds like you'd be better off absolutely positioning the menu at the bottom, and using relative postioning on vid_window. With a little JavaScript you can resize it correctly, and it should resolve your overlap issue. If you're allowed to use it, you can make quick work of it with jQuery.
Like James says the best way I can think of for you to do this is set a class on the Div vid_window set the height % in the class and check the display window size to determine your optimal settings. Also I would probably set a min-height so that the page won't go below that height and for backwards compatibility look at Modernizr. http://www.modernizr.com/
------EDIT------
That the Header and footer will never be off of the page. One way to reduce the problems you are having is setting the height on the header and footer to percentages so that they will scale with the height of the body
html,body { height:99%; min-height: 100%; }
header { height:22%; min-height: 100px; }
#content { height: 56%; min-height: 200px; }
footer { height:21%; min-height: 100px; }
The min-height values can be whatever you think is appropriate for the smallest height you want to go. The percentage heights on the rest should auto scale you header footer and consequently your content. This will however force the footer to go off the page at a certain point (when all min widths are met and the browser window continues to shrink). I do think that this would be desirable and should meet your clients needs. If not then you are going to get into a very complicated javascript that is not always going to do the math just right because of how each browser handles padding and height calculations. On top of that if they disable javascript then it would never work.