I am building a website using Foundation Zurb 5. The website will have a page that has an h1 tag to display the page title. Underneath the title, I want to show a high resolution image. By itself, the image's resolution is 1920 x 1200. This image will be used on the large version of the page as well as the mobile version.
When the image appears on someone's computer (the large version), I want it to have a maximum height of 200px. This currently works. However, when the image is viewed on a mobile device, I want it to scale down such that it takes up the full width of the device. This latter requirement is not working. Currently, I'm trying the following:
<div class="th">
<img src="/res/img/sample-01.jpg" style="max-height:200px; max-width:100%;">
</div>
I suspect the problem has something to do with landscape vs portrait viewing. However, I'm not sure. At the same time, I'm not sure how to accomplish what I'm trying. Does anyone know how to do this? If so, how?
Maybe you should try to use background image for that:
for example:
.th{
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
<div class="th" style="background-image: url(/res/img/sample-01.jpg)">
</div>
I suggest looking at Interchange and modify the actual images. That way you will not load the large 1920 x 1200 image on someone's mobile device. I believe this is a more elegant solution, but I am not sure how comfortable you are with image manipulation.
Another approach would be to use the Visibility Classes. If you went this route you could have two divs or two img. One for large screens (desktops) using the show-for-large-up class and one for smaller screens (tablets/phones) using hide-for-large-up.
Related
I have set up a background-image for large and medium screens.
I have a touchbar macbook and it fits perfectly.
If I play with the mouse to make the window smaller (to see how it would be for different resolutions and less pixels), it's completely responsive and looks fine (it cuts a bit the right part of the picture but it's not zooming).
Same when I open the developer tools, the Ipad pro version is half-cut but not zoomed.
But when I try to go on the website with an older macbook, the image is completely zoomed and does not fit the screen anymore.
I don't understand how there can be such a difference as we have different resolutions but same inches.. And as when I play with it on my computer, the image stays at the right size even with less pixels.
How can I solve this problem? Why is it doing this? I am fine if the image is a bit cut on the right or left side but I don't want it to be zoomed.
I have tried - height: auto, width: 100vw, background-size:contain (but it's too small) and no-repeat... basically everything with css
background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;
Thank you
When you use cover for background it is guaranteed that the same image will NOT look perfect on all screen sizes, since the browser needs to display it in different dimensions.
To handle this you may generate several images, each for screen size you aim at and use CSS media queries to apply the appropriate image for each screen size.
I got a very plain photo gallery site. Every page only contains a image (600 x 400) or a image slider. I have problem with the look of my website on smartphone/tablet on landscape mode or even a laptop. Because the bottom of the image/slider will just be chopped off. So you need to scroll down to see the whole image. On my desktop or portait mode on small devices it looks good. I had like the image/slider be showing in a smaller size on those screens so you dont need to scroll down to see the whole image. Can someone help me with this? I built this with a twenty sixteen childtheme in wordpress.
Thanks,
Hazy
I recommend using Slick carousel. that's an easy slider initiator and will save you lots of time and adjustments: http://kenwheeler.github.io/slick/
For single images use the following css properties :
max-width: 100%;
height: auto;
I have designed a website on my retina monitor, set at the highest resolution. On this resolution the site looks really great :p. However, when I view the site on a smaller 13" monitor, all the elements and the font are way too big and in your face.
I have done some research, and found two ways to try and show the website in a nice way across different desktop screen sizes:
Use a media query to Scale/Transform the body. However, this "feels" wrong and I can imagine this has some performance impact. Furthermore I can imagine this gives inconsistencies across screen sizes
Use ems across the board. I am not really sure what'd be the right starting point for this, but I have read that some people base everything upon their font-size. However, I would not really know how this'd work for images.
Can someone please tell me what'd the best way to make the website display nicely across desktop screen size.
p.s. The website is based on twitter bootstrap
I would suggest the second option. The way it would work is by setting the element font size in px, and using relative sizes for the containers and divs inside them.
For example
<body>
<div id="container">
<article>This is some text</article>
</div>
</body>
CSS:
html{
font-size: 32px;
}
#container{
font-size: 1.5 rem;
}
article{
font-size: 1.2 em;
}
CSS-tricks has a nice article on this - http://css-tricks.com/rems-ems/
As for image resizing, that can be done dynamically in JS based on window.width()
I've got the page divided into different parts like header, footer and body. Now i need to set images on the background of header and footer. Should i choose a bigger image which can be re sized according to user's system dimension or should i keep it constant size?
How to keep an image withing the section that has been decided for it?
i'd create separate images for the smaller devices as the smaller file sizes will help when loading on tablet or mobile. Load in the different images using media queries
header-bg-desktop.jpg
header-bg-tablet.jpg
header-bg-mobile.jpg
I agree using separate images is beneficial for performance (especially on phones), though if you wanted to do this with CSS only, you can use background-size: cover, which will ensure the background image does not stretch, but also fills in the entire parent container.
E.G. http://jsfiddle.net/YNBw9/
You want to use background-size: cover to get the images to fill the containers at different size. You also want to use media queries, if possible, to deliver the right sized image to the right screens. That is, you don't want to overload a small screen with more pixels than it needs (not the screen, the bandwidth and load time) and you don't want to scale up a crappy image for larger screens.
http://plnkr.co/edit/bMryzPTGzUK6Y5BbDpWh?p=preview shows an example. Resize the right pane.
More on media queries:
https://www.google.com/search?q=media+queries
More on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://css-tricks.com/perfect-full-page-background-image/
It largely depends upon your website's target audience.
If you are going to target mobile, tablet and desktop all three user bases, then you must supply images for all of them with different background image code via CSS.
Here is a very good reference to get you started,
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If you target desktop users only then you need to supply one-background image size and that should be enough.
Example code,
<style type="text/css">
body {
background-image:url('<%=request.getContextPath()%>/images/logo.jpg');
background-position: left top;
background-repeat: no-repeat;
}
</style>
I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.