Highlighted

auto update of image widths

New Here ,
Jul 01, 2019

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.

Views

110

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

auto update of image widths

New Here ,
Jul 01, 2019

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.

Views

111

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 01, 2019 0
Adobe Community Professional ,
Jul 01, 2019

Copy link to clipboard

Copied

Remove old image from code.  Ctrl +S to save, F5 to refresh.

Insert new image.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 01, 2019 1
LEGEND ,
Jul 01, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 01, 2019 1
Adobe Community Professional ,
Jul 01, 2019

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).

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 01, 2019 1
New Here ,
Jul 01, 2019

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 

How To Align Images Side By Side

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 01, 2019 0
Adobe Community Professional ,
Jul 01, 2019

Copy link to clipboard

Copied

They have used CSS for the percentage width:

<img src="img_snow.jpg" alt="Snow" style="width:100%">


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 01, 2019 1
LEGEND ,
Jul 02, 2019

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 -

https://developer.mozilla.org/en-US/docs/Web/Reference

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 1
LEGEND ,
Jul 02, 2019

Copy link to clipboard

Copied

Puddingsp  wrote


How To Align Images Side By Side

Ugh...example using 'float'.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 0
New Here ,
Jul 02, 2019

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 02, 2019 0