Drupal Answers is a question and answer site for Drupal developers and administrators. It only takes a minute to sign up.
Sign up to join this community
CSS architecture (for Drupal 8) says:
Never apply widths or heights except to elements that natively have these properties (e.g. images).
I use CSS properties like width:100% often with images. It seems much easier to get to than the markup most of the time. Does this guideline mean I should not being doing this? If so, is the only solution overriding a template file to get at the HTML element properties?
What I understand is, it is suggesting opposite to what you are interpreting.
Lets take a look again.
Never apply widths or heights except to elements that natively have these properties (e.g. images).
So, it is saying that, you can apply the height and width to image freely as the Height and Width are the default property of images. This you can understand as all images has some width and some height. So they are intrinsic property of image.
Now, lets take other proof, why you can apply Height and Width to image. If you see the Drupal's core feature,
Image Style at Admin/Config/Media/Image style, there you can specifiy as many image style as you want with different Width and Height.
Hence this feature allowing the facility to change the dimensions of same image with different Image styles - AND how this is happening, simply by changing the height and width, So this is the core feature.
Hence, image comes in the category of except in your highlighter following statement.
Never apply widths or heights except to elements that natively have these properties (e.g. images).
So, you can freely use width and height to Images.
"To be fair, the wording could be better." I started finding what is wrong in my the answer and I started searching the word...;). Hence if you would have added that comment, under main question, it would have make more sense. Again this also became a case like chrisshattuck's question....Hahaa...
Do note that those guidelines apply to
Drupal core and contributed modules
(emphasis mine).
They don't apply to themes.
The point of the document is to make sure that CSS implemented by module developers isn't awkward for themes to override.
The decisions you make in your own theme are your call. So if you want to apply widths to images, apply away.
Incidentally, the CSS formatting guidelines are intended for themers, so they're worth a read. Even those examples use widths in selectors that are unlikely to refer to images, so you can safely assume the other guidelines don't apply here.
Heck, if they did, we wouldn't be able to create responsive themes.
You must use width and height proterties.
The main reason is than after load the html, your browser will render the page but the images are not there.
If you use size properties, the page will use the right layout because the browser knows how big are the images before they are loaded. If you don't use size properties, your page will look like a mess until images are loaded.
