I have a website https://drygon.ca/ , there is a photo "Photo a day" in the homepage, it displays in all the browser and devices except Chrome in Windows. I tried the Chrome in Linux, it works too.
I inspect the element, the hyperlink is there, wonder why it won't display? If I click other tab, then click homepage again it 'll display.
The website is written in reactjs, photo is stored under firebase.
Windows 10, Chrome 59.0.3071.86(64-bit)
The "photo a day" image loads for me in Chrome. I am on Version 58.0.3029.110 (64-bit).
However it takes extremely long for it to load in Chrome vs Firefox(about a solid minute), your issue may be to how large the image is 3648 X 2736(current image). You are reducing the width with CSS however the browser still processes the entire size of the image. Attempt to use a image tool and reduce the actual image to the desired size.
Revised:
After taking a second look at your site, I believe the issue going here is how chrome is handling the CSS rule of flex. The site has the flex rule throughout, particularly on the Photo A Day and it's container with id of #dayphoto. The flex items inside this container(card-header and the day photo) are being made to be the same height, however since the image is being loaded from an absolute path, it isn't added(with it's height) until later. Thus the .card-block container around your image is getting the same height as the .card-header, additionally your image has it's height set to 100% which it inherits from .card-header. Read on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In a nutshell, change the css height on your image to:
#dayphoto img {
width: 640px;
height: auto;
padding: 1rem;
}
The image is actually always there/loaded, you just can't see it!
Related
I have a webpage with different images of different proportions. I want to display in the best format for different devices: desktop, tablet, smartphone, etc.
Is it best to use CSS3 #media (mx-width: ** px ) or jQuery $( window ).resize(function() and $( document ).ready(function() { with a change in the size of the image?
The last step works very well and does not require to set a lot of different media sizes as in the case of CSS3, but if Javascript is disabled it will not work.
Basically, I want the images to be responsive, but not with re-scaling of the screen of the device, which is what I get with the Javascript code, but offering the full width of the container div when the page and images are displayed in a smartphone. I think that the approach would involve PHP code to get the Client data ( $_SERVER['USER_AGENT'] ) because don't want images to be too big to go outside the screen, and when using a smartphone I don't want the images to be too small to be seen, and here I have the problem of screen resolutio: the pixels of the image can be 1200 px, but it is shown very small because of screen pixel density or resolution.
The best approach these days is using a technique called "responsive image sizes" along with good old CSS to handle image scaling on devices with similar screen sizes.
Using 'resize' event to manipulate the DOM with jQuery is a staging way to bad performance and bad user experience.
The core idea is to load smaller images on smaller screens and down-scale them in browser if image is bigger than required, using:
img {
display: block;
/* You should never upscale raster images in browser */
max-width: 100%;
height: auto;
}
Here is a good article, that covers the concept in details: Responsive Images in Practice
I would recommend checking out lazysizes, it implements lazy-loading as a bonus.
This is how you use it in your markup:
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
I would be very grateful for some help with a Safari image resizing issue as I have spent three days on this one problem.
I am building a responsive store with Woo Commerce using the Canvas template.
The problem is with the Safari browser...it won't enlarge the images to fit their container div and be evenly spaced and sized.
Here is a category page for your reference: http://omshivaloka.x-gr.net/product-category/shop/men-2/men-malas/
Here is a single product page, with the issue at the bottom beneath: "Products you may like": http://omshivaloka.x-gr.net/shop/hanuman/
I researched extensively all over the internet to find a solution and keep hearing to change the height and width in my CSS to:
ul.products li.product a img {
height: 100%!important;
width: 100%!important;
}
It's making them stretch, and is therefore not a solution.
In my Woo Commerce configuration, I have set the size of that picture to be 210*300px - Safari is not recognizing that...or maybe it is and is not outputting it immediately?
Perhaps you are having the same experience as I am in seeing the image expand when you mouse over it. Strange indeed...
I appreciate any help...thank you!
Cassandra
Just wondered if anyone using the Flexslider has found that when switching back and forth from different size browser windows the slide images do not automatically adjust to new height and widths.
Let me clarify - they do shrink correctly but when scaling back up the first image in the slideshow gets stuck at the previous aspect ratio until the next slide comes in, at which point the whole thing adjusts.
To stop my content from being affected I have created a fixed height container for the flexslider and have used media queries to change its height as it is scaled down. This works perfectly scaling down.
It seems to be on the way back up that it has trouble sorting the image heights out.
I would provide links but it is a new client project in confidence.
All coding is exactly as is from the demo files, with exception to the fixed height and media queries on the container div.
I had the SAME problem - I found that not all my widths were of the same value.
e.g.
.clone { display: block; float: left; width: 994px!important; }
<img src="http://www.website.com/images/panel1.jpg" alt="" width="980px">
There were about 4 instances in my css that had different widths [shame shame] so I went in there and raked the css file.
I hope this helps
Good Luck
I've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.
I have a long image that is currently serving as a navigation system for a site in development. You can see it here. This navigation system will eventually be split into smaller sections, but I imagine I may well see the same issues that I am seeing now.
The image is 1920px wide and the idea is that, however wide the user's browser window (up to 1920px), the navigation image (branch) will always extend off the screen. The leaves at the center of the navigation system should always be centred on the page to match the logo above.
The navigation DIV currently has the following CSS:
#nav {
position: absolute;
top: 210px;
left: 50%;
margin-left: -960px;
}
The body has a min-width of 900px.
There are two issues I am having with this setup:
As you will see when you visit the page, the width of the browser page is being set by the right edge of the long image for the navigation system, when I would like it to be set to 100% when the width of the browser window is greater than 900px, and to 900px (with horizontal scrollbars) when the width of the browser window is less than 900px.
The navigation system isn't respecting the min-width of the body, i.e. it continues to move to the left even when the width of the browser window is less than 900px, whereas the rest of the page content doesn't.
Could someone help with these issues?
Thanks,
Nick
What I would do is
Cut out the middle part of the image (the one with the actual content).
Take out a slice from the line background that can be repeated infinitely. Like so:
Put the middle part of the image into a div that is 100% wide and has
background-image: url(/path/to/slice.png);
background-repeat: repeat-x;
that will give you an infinitely resizable navigation area, without needlessly expanding the page.