Various HTML tags such as <img> or <embed> can have this attribute and value:
width="1000"
It’s interesting that there is no px after the numeric value ever and browsers automatically know its pixels.
Is the width HTML attribute responsive?
I am afraid that jin some cases, without noticing, it will cause an image to overflow out of its wrapper in mobile view and I would assume that the best way to prevent this is to always check the webpage from a mobile view after giving this attribute and value and then change its value if needed, but if its responsive than there is no ndeed to worry about that, am I wrong?
Attributes themselves are not responsive or unresponsive. It’s the tag that may or may not be responsive. But to answer your point, how can a fixed width ever be responsive??? It’s the complete opposite.
That’s because the width attribute only knows px because its related to a replaced resource that is only sized in pixels. Therefore units should not be added.
Of course not. It will be the size that you told it to be and even if you didn’t tell it it would still be its natural size once the browser works out what that is.
You should always include the natural width and height attributes on images to allow the browser to allocate room for them even if they are later resized by css and allow other content to continue to be drawn while the image is loading.
To make images responsive you use CSS as CSS defines the look not html. You could simply add a max-width:100% in css to the image and that will stop it breaking its container but in most cases you would use width:100% and height:auto in your css. It all depends on situation and the design.
As I said above img {max-width:100%} will stop that from happening. A lot of people use that as a default in their stylesheets anyway.
A fixed with can’t but perhaps the HTML mechanism has some responsiveness hardcoded behind the scences (I don’t know the source code of the HTML program and can’t opine).
But I have a case where I gave an image width="716" and in mobile viewport of about 320px it doesn’t overflow outside the wrapper (tested from two devices).
How can we explain that?
Probably the framework’s CSS is preventing overflowing still somehow.
Your browser’s “Inspect” tool should tell you if the style is being overridden by the CSS framework.
My personal preference is:-
img {
max-width: 100% ;
height: auto ;
}
Using width: 100% is also a valid solution, but I prefer max-width as it prevents the image going larger than its natural size, if it’s container is bigger.
I will still use the width attribute on the img tag to let the browser know the preferred size. But the CSS will override that on small screens to be responsive.
Your browser’s “Inspect” tool should tell you if the style is being overridden by the CSS framework.
My personal preference is:-
Indeed, when inspecting the image I have found these directives added by the framework:
img, video {
display: block;
max-width: 100%;
height: auto;
}
There was another case however in that fraemwork when a picture with width="500" was overflowing but it was when I have added the picture with another tool which probably creates different markup and CSS so I assume that it’s always better to check the webpage from mobile view regardless, by principle.
As a developer you should be checking all widths at every step of development. Never wait until the end.
If every time you add a block of code you grab your browser window and slowly close it down to about 320px and then open to maximum you will immediately see where problems occur on almost any device now or in the future.
There is no need to test on mobile quite so often as the above will catch all the responsive problems. You need to test on mobile for device specific problems but responsiveness can be tested on desktop.
Developers have it easy these days with developer tools and browsers that work. In my day we had to test on a myriad of browsers at each step and cope with multiple browser bugs at the same time
You cannot possibly test every device because there are literally hundreds of devices all at different sizes.
The best method is to open and close the desktop window slowly and if you say went from 320px up to 2020px at 1px a time then you have effectively tested 1700 device sizes. No other method beats this for simplicity and immediate feedback.
Of course you still need to test real devices when you can but most people only have one phone so that is unreliable as a guide to all phones.
As soon as I add a block of code I open and close the browser window and see if anything breaks. If it breaks then it can then be fixed easily at that moment. It only takes a few seconds to do and should be part of your design methodology.
As soon as I add a block of code I open and close the browser window and see if anything breaks. If it breaks then it can then be fixed easily at that moment. It only takes a few seconds to do and should be part of your design methodology.
I agree. Most of the time I resize a window but often just checking about 320px viewport from mobile view in inspection tool.
Never wait until the end.