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
Related
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
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.
I have this site My Site. If you try to resize the window you will see the image resizing. I want the page to work exactly as this one : Template
I am tried with no result the min-width and text-wrap in the following code :
.wrapper-style1
{
background-image: none;
background-color: #eae5e5;
min-width:70%; \\I changed that with some pixels but nothing changed.
}
I tried to put some classes that inherit from .wrapper-style1 like : .wrapper-style1 a img and with minimum size and it did not work.
Looks like you need to set a div to hold your elements and images. That div needs to have a fixed width (say 400px) to prevent all the elements getting squashed up together.
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.
imax is a div element.
#imax {
width:222px;
height:222px;
}
#imax img {
width:222px;
height:auto;
}
if either way I tried auto on width or height, the images with different orientation will result in distort in either scale. How could I fix to display with ratio-aspect?
Leave out the height:
#imax img {
width:222px;
}
And the browser will take care of the aspect ratio calculation.
The image is distorted since you put restrictions on it's parent. If you specify just one of the size attributes, the other should scale according to proportions - unless it's limited/affected by its container. Might work differently if you used max-height/width on the container
Cannot be done with CSS only.
You could use Javascript to do this: Get either height or width of the full size image, then calculate the correct smaller size.