Copy link to clipboard
Copied
Hi,
I’m having issues with Dreamweaver which automatically alters the width values of my image when I change/swap an image.
The width value is set to 100% (width=100%) as the image is held in a responsive div container. When I come to alter the image (double click on the image in design view) or alter the “Src” in the properties tab the new image is automatically changed from the 100% value to an absolute value (400).
../image/example1.jpg" alt="image 1" width="100%" />
changes to
../image/example2.jpg" alt="image 2" width="400" />
I can alter the width manually, but it is inconvenient and easy to miss.
How do I stop this automatic feature in Dreamweaver?
Thanks for reading my question
The reason Dw changes the value from a percentage to a pixel value, is because html5 does not allow percentage values to be used for image width or height values.
If you wish to use percentage values then it is recommended you do so using css.
Copy link to clipboard
Copied
Remove old image from code. Ctrl +S to save, F5 to refresh.
Insert new image.
Copy link to clipboard
Copied
The reason Dw changes the value from a percentage to a pixel value, is because html5 does not allow percentage values to be used for image width or height values.
If you wish to use percentage values then it is recommended you do so using css.
Copy link to clipboard
Copied
It should also be noted that an image width of 100% is going to be distorted and pixelated on larger displays. Whereas a max-width of 100% will not upscale beyond the image's native size (400px).
Copy link to clipboard
Copied
Thanks for the advice and html5 insight.
I got the original design layout from w3schools, where they use width 100% for their responive images....
https://www.w3schools.com/howto/howto_css_images_side_by_side.asp
Copy link to clipboard
Copied
They have used CSS for the percentage width:
<img src="img_snow.jpg" alt="Snow" style="width:100%">
Copy link to clipboard
Copied
Just for future reference, the W3Schools web site has NO association with the W3C, it is a private commercial site. If you do wish to use a reference/learning resource that is sponsored and approved by the W3C, (and firefox, Chrome, Microsoft) then the site to use is -
Copy link to clipboard
Copied
Puddingsp wrote
Ugh...example using 'float'.
Copy link to clipboard
Copied
I see my error, I saw width=100% and completely missed the “style=" , it's funny what the brain wants to see..
Thanks for the support; from a grumble about Dreamweaver I’ve been highlighted to an error with my design, and found something new to learn about (Flexbox)