Chrome stretches website images, Edge, IE, Firefox not - javascript

I find it hard to figure out why the images on the home page of https://www.kerkradio.za/index.php show up stretched. I am no boffin at CSS or so, but in IE, FF, and Edge they are all showing the images fine. I found one reference to a solution here (Chrome is stretching my images vertically, however everything works fine in Firefox/Edge), but it did not help really.
I have had a look at instances where the image height and width are set to auto and changed it to 100% instead. No luck. I am sure I am missing something in the css-es.
Please refer to the code of https://www.kerkradio.co.za/index.php. Scroll down to where all the church image cards are displayed.
I have been at it for more than 3 hours now.

I guess you need remove height from this selectors:
.card-img img
Look like some different behavior flexbox and image calculation size. So img contains:
width: 100%;
height: 100%;
chrome expands image to 100% original height, while firefox image resize to 100% container height

Related

How to make this banner slider to fit the browser height?

I googled for 2 days trying to understand how the auto height fit works, I think I understand in how to make a background fits the browser, but with this banner slider, I don't have a clue.
Could someone please enlighten me on where should I look for/start? Should it be a CSS or JS?
I'm very new to HTML5/CSS3, Wordpress gave me a very easy environment to start a website, but I just barely know how to modify a website other than a plugin.
It would be very cool if the slider section to fit like this one below
Thanks in advance!
This should set the image/album you have on the homepage to be the height and width of the browser, tweak some of the CSS and it should line up with the Sidebar perfectly like you wanted.
img {
max-width: 100%;
height: auto;
width: auto\9;
}
If you are looking for the image that fits the browser height regardless of any display then you can use 'vh' unit from this css units page.
vh means viewport height[viewport = the browser window size.], and 1vh = 1% of the height of viewport, so in your case you can use 100vh for image like this:
img{
height: 100vh;
}
Check this jsfiddle for the same.
Remember that you need high-resolution images and those images will not look good on mobile devices.

Why is my nav-pill on the top of my screen in IE & Edge but it looks fine in chrome?

I am making a simple web page, but on google chrome it looks perfectly fine, just how I want, but when I open the page in IE or Edge the nav-pill tabs are at the top of the screen instead of near the middle like they are in chrome.
Images:
I have the 'top' property of the div that they are in is set to 30%.
I have a lot more code, but I don't want to flood this with it, If you need more info let me know! Thanks in advance!
#bodyArea
{
width: 425px;
position: relative;
top: 30%;
left: 44.3%;
}
After testing the code you showed us i noticed as well that it didn't work in IE. From here i would conclude the percentage from top for position:relative is incompatible with IE (judging from this: https://msdn.microsoft.com/en-us/library/ms531177(v=vs.85).aspx IE takes a percentage of the parent container and it might not know the height of the container of your div). I am afraid i can't be of more help without knowing more of the code around your div.

Make an image responsive by height AND width

I am working on a site for a client, using a purchased Wordpress theme (so all the code is not necessarily mine, but I can pull something if needed).
The landing page has a responsive background image. On top of that, I need to use images to show the relevant logos (the fields where I input this were intended for text, but they allow images with no problem). The image has a border wrap around it also, and then people can scroll down from there to see the rest of the content.
My problem: on desktop, the logos will rescale with the WIDTH fine. But one of my clients is viewing in a very widescale-oriented browser window (which I figure is unusual across all users, but it's the client!), and the logos do not rescale with HEIGHT changes, so they get cut off by the border wrap.
I've tried things like
.home-section img {
max-height: 50%;
}
Which is what the theme's developer provided initially, and also changed 50% to 50vh (just trying some things I came across online, not a code expert by any means), and also a variation of this solution HERE
with no luck.
My (again, partial) understanding is that since the height of the div with the background image isn't set explicitly, I can't use a percentage height for the logo/child element, but is there a way to solve this?
I'm currently using srcset to get the logos the right size for mobile, but that's not a perfect solution. I figured there may be a javascript solution too, but I'm only about 75% with HTML & CSS and not much with JS/PHP without explicit directions. (Call it capable, but inexperienced).
You can view the issue HERE.
Thank you!
=================================================
EDIT:
A coworker came across this solution, which improves things greatly. The issue still happens at a short enough browser (IE landscape phone viewing, etc), but works on a greater range of viewport sizes:
div.home-section-image {
min-width: 600px;
max-width: 1080px;
min-height: calc(690px * (90/150));
height: 100vh;
width: 100vh;
}
The logos now scale vertically to a point, though the viewport height can still catch them and cut them off, but at a better threshold (at ~550px high, where it happened at ~720px high previously - now well beyond a normal person's minimum browser size, my understanding is ~760px is average).
I tried to combine this with #kburgie's code suggestions to keep the logos completely above the green border, but my results ended up pushing the logos off the TOP of the page instead, which is worse (for me, on a horizontal Galaxy S3, I can at least get the main square of the top logo to display, which is enough for me at that size).
Thanks to everyone who helped - I think this may be the best solution I can pull for now!
Seems like you should be able to combine width and height media queries to catch that edge case:
#media (min-width: 1200px) and (max-height: 500px) {
.home-section img {
height: 200px;
width: auto;
}
}
I don't have enough rep to comment or I would. I think isherwood's media query is too specific.
Responsive images should already be responsive by height AND width, and the best way to handle that is by working with the image width.
This is a dangerous selector and you should get rid of it:
img {
height: 100%;
width: auto;
}
It will affect ALL images on your site. You should use a class instead. Beyond that, your images are already set to max-width: 100%, which is all you need.
Focus on your positioning instead
Step 1: Remove your margin top and bottom
.home-section .container { margin: 0 auto; }
Step 2: Absolutely position the image container at the bottom of it's parent. Then it will always stay above the green border. Stick it in a media query if you'd only like this positioning above a certain screen size.
.home-section-image {
position: absolute;
bottom: 10px;
}

Making images respond to browser resize with both width and height

I have been trying to make images resize proportionally, leaving whitespace, so they are always fully seen in the browser window without having to scroll. All of the solutions I have found so far can resize the image based on the browser window width, but if the proportions of the browser window don't match the image, then it will cut off the image and the user will have to scroll down to see the rest. I know that there is also background-size: cover; but I don't want the image to be clipped. Any ideas?
You can try vh and vw units in CSS. And accaptable by almost all browsers.
img{width:vw;height:vh;}
The drawback is image may shrink... So you can try with overflow hidden.
img{width:vh;height:vh;overflow:hidden;position:center;}
You want the object-fit: contain property if you're using <img>, or background-fit: contain if it's a CSS background-image.
http://codepen.io/robinrendle/pen/BywNVX
object-fit doesn't have perfect browser support, but there is a polyfill for it.

How do I make a child's div width match its content with parent's div width 100% overflow-x: auto in IE & FF

I have an art gallery full of thumbnails. I wanted to add a customized horizontal scrollbar so that users could scroll through a single row of thumbnails. There are different amounts of thumbnails in each gallery. I tried using CSS property "width:-moz-max-content;" however this only works in Firefox and not IE6,7,8, Chrome or Safari.
Here is an example - > http://theo.mypreview.co.uk/ashmolean-museum
The website's width is set to 90% of the viewers browser size.
div class="Content" - the holder
div id="posts" - is where all the thumbnails are generated
sidenote - I have just installed jscroll
You could use some of the browser specific CSS3 properties:
#hero {
width: -moz-max-content; /* Firefox */
width: intrinsic; /* Safari, Chrome */
}
For information regarding these properties view this MDN doc:
https://developer.mozilla.org/en/CSS/max-width
As you will notice, these do not support IE9/IE8/IE7 and definitely not IE6. However, I would imagine that a solution around this would be to use JS to calculate the width and adding a width to the element needing this functionality.
There are some very good jquery galleries available that will do what you need. Just google jquery galleries. or http://www.1stwebdesigner.com/design/fresh-jquery-image-gallery-display-solutions/ . I hope this helps

Categories