I'm using HTML5's <picture> tags to create a responsive header that will stretch the entire width of the browser. The header uses an image as the background.
For larger screens I limited the height to a defined value. However, I noticed that a certain breakpoint the image starts to stretch and distort the image.
I'm familiar with using CSS's background-image: url(); to create a mask in order to prevent the distortion, but I don't know what best practices are with <picture>.
My code currently stretches and distorts the image. Is there a way to 'mask' the image?
First thing you should know is that if you will give height to any image then in some screens it will stretch.
So instead of giving the height you should take the image of exact size it will do the thing.
If you can share the code I can fix it and send it to you.
Hope it helps.
User zgood was able to lead me in the right direction. Adding object-fit: cover to the <picture>'s <img> tag got the job done.
On Apple.com, their homepage, underneath the slides, you see 4 clickable posts/images and when you scale the browser window(or use a phone or tablet), they scale according.
Is their a plugin for Wordpress that mimics this type of behavior or HTML code?
Where you can have 4 images to scale to the UI, simple HTML code?
I know there are plugins that do this with latest posts but its not what I want. Thank you in advance.
Example image
They are using the background-size attribute. What that does is ensure the image is contained within the parent element and scaled up or down to ensure that it's at 100% width and height but still within the parent container.
It accepts a couple of properties. Here is the table of browser support.
background-size: contain;
Contains the image within the parent element and does not overflow.
background-size: cover;
Ensures the background image covers the full width and height of the element it is applied to. It won't skew the aspect ratio, it will simply overflow the element to the right size to maintain the aspect ratio.
Also, just to note, you can use pixels and media queries to explicitly set the image width/height ratio. This would look like this and goes in the order of width then height and if you use one value instead of two, that will also work.
background-size: 250px 150px;
Note that the background image is contained to the element it is applied to regardless. So even though it technically overflows when using cover, it doesn't visually spill over the element so it doesn't look messy.
I found a similar question here, with the answer: "you should always define the width and height in the image tag." But it is from 2009.
In the meantime, many things has changed on frontend. We are all doing responsive page design now, for many devices and sizes simultaneously (mobile, tablet, desktop...).
So, I wonder is it still necessary to specify the width and height attributes, and for what reason (for responsive, page speed, SEO...)?
An img element has width and height attributes, but they're not required under any DOCTYPE.
Width and height attributes were only 'required' or relevant to reserve the space on the page and prevent the page moving around as it loads - which is important. This can be achieved using CSS instead providing the CSS loads quickly enough - it is likely to load before the images anyway, so all should be good.
It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio.
You can specify percent values in the attributes if required. You don't need to use CSS for this, if that is what you are implying.
Also, it is relevant to add - Under HTML5 the width and height can only take a pixel value, in other words a valid non-negative integer.
Whether you use the width and height attributes can depend on your design. If you have lots of differently sized images, do you want to lump all the dimensions in the CSS or include them with the img?
YES, you want to declare the width and the height of an image in 2016.
To make them retina-ready
If you want your image to be retina-ready, you should define a width and an height lower than the actual pixels. If the image is 800x600 specify <img width="400" height="300" />.
To avoid page jump
Without the width and the height the image does not know how large it is, which causes an unwanted jump in the page as it loads (it reflows). Declaring height and width solves this problem.
Note that:
Images with a defined width and height can still be responsive. Simply add max-width and max-height to your CSS. This will cause the image to scale down (not up) when it does not fit the screen (see this sweet retina-ready, responsive kitten). Defining a min-width and min-height will do the opposite.
Adding a huge amount of compression to your JPG (around 50%) to keep the file size low is recommended when you use a single (relative large) image for all screen sizes.
Well, the basic answer to this question (as with most coding issues) is this: it depends on the situation at hand.
I would say that the “best practice” of always specifying the height and width attributes of images making a significant difference to page rendering speeds hark back to the days when designers laid out their websites using tables and spacer GIFs. We have come a long way since then.
An indication for the future is the introduction of the new picture element being drafted into HTML. The picture element is effectively a wrapper for the existing img element, which allows you to specify several images of different sizes via a source element, and the user-agent itself actually determines which version is used.
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
As you can see from this example code above (taken from the Intel Developer Zone's article on the HTML5 picture element) there are no height or width attributes on the img element itself.
Here are a selection of resources that will help you to decide the most appropriate method of declaring image sizes:
Responsive Images Community Group
W3C Working Group Note: Use Cases and Requirements for Standardizing Responsive Images
WHATWG HTML Living Standard: The picture element
Good standards are always worth a recommendation. With a little extra code it's quite easy to merge static (px) values of the img tag and generic (em, %) values supplied by CSS. And simpler still, get rid of the img tag altogether and set the picture as background of a div with a unique ID. If you have multiple images, use sprites and assign each picture to its corresponding div. Your mark-up sources would then look something like <div id="image_001"></div> - that's all. Scales all by itself; no need for bloatware like JQuery, etc.
If we're talking 'bout responsive, you may use bootstrap (if not, start doing this).
When working with images, you should add the class img-responsive, this will modify the width of the image if necessary and the height will be auto, so if width decreases, height will decrease too.
You will always have an image that keeps the same % of its container and will never loose the aspect ratio.
There's no relation with SEO and image size declarations.
Page speed will be the same always, so if the image is 800 x 600 px, you'll load the full image, even if you declare it as 60 x 40 px.
You must think that, even using img-responsive, the max width and height of this image will be the real size of the image. So if we have a 800 x 600 px image, it will not enlarge it (because it'll become loosing quality).
So in 2016, it's recommendable to NOT declare height and width of an image. Instead use bootstrap's img-responsive class, other responsive framework class that gets the same result, or hand-made the proper jquery and css to reach the same.
Hope it helps!
Yes, It is still relevant to specify width and height attribute on images in HTML.
Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of
the image so that the browser can render the rest of the text on the
page while leaving the right amount of space for the image that is
still loading.
Hence, specifying width and height attribute on image will improve the webpage performance by protecting from delay in loading.
Yes, it is necessary to add height and width attributes to the img tag along with the src and alt attributes to prevent page-jumping. When our page loads, the specified space will be preserved for the image so that the it can occupy that place peacefully.
But, there is another problem that will arise here Responsiveness.
Once we give height and width attribute to img tag, the image will tend to stay in the same height for all screen-sizes which will make the image to shrink.
To avoid this, we need to add height: auto; to the image in the CSS file.
I admit in the beginning that I am new to UI development and started learning recently. I am developing a website which i similar to InuitLabs.com. When I looked at the source code using view source I am totally lost. Particularly I am interested in knowing
How the slider image on the homepage is responsive? Is it through javascript or using pure css.
Also I want to know the text moves upwards on scrolling leaving behind the background image intact? How to achieve the same effect.
I know this might be the basic question but I found it hard to know through the source code as there are many javascript and css files.
Regards,
Pradeep
Take a look at the background-size property.
you can set background-size to any px or % value or use constants:
cover will adjust the image size to fill the entire container while contain try to fit the image inside the container without cropping it, most likely leaving some parts of the container without any background.
What you probably want is to set your background-size property to cover.
you just set the image to the percent you want in % through css for example:
.slider img {
width:100%;
}
edit: also you need to specify the height as auto, if you do not want to lose the image ratio. if you set width and height at 100% the image ratio will be messed up.
if you want to set responsive height also for longer device then use width:100%; and height:100%; other wise you can use height:auto; make div and keep it background-size property for it.
I am trying to create a completely fluid layout in CSS (everything in %), which would work seamlessly across platforms (desktop/mobile/tablets like iPad).
With Fluid Layouts, can an image be made completely fluid? For example:
img { max-width:100%; }
Does this mean it will adjust/fit to any extent or window size?
Also can this be applied to background images as well ?
Does this property have any limitations in terms of browser implementation or anything ?
The snippet you provide says that the maximum width for the image is 100%. This could mean no wider than the browser window or device viewport. It could also mean no wider than a relatively postitioned parent node. But, if the window is big enough, the image will render at it's native size.
It can't be applied to background images, because the background image itself is tiled or positioned based on it's original size. The max-width trick is mostly useful for content images, not so much layout or styling images.
It is limited, in that IE6 doesn't support it at all. However, that market is rather small and shrinking, so maybe you can ignore that issue.
Your code means the size of the image relative to it's parent's width. So lets say the div that the image is in is 500px wide, then the image may be a maximum of 500px wide, or smaller, not larger. for more info on max-width: W3.org max-width
For backgrounds this works a little different, you can use background-size: x y; for this. It's CSS3 and is not supported by older browsers. for more info on background-size: W3.org background-size