• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

auto update of image widths

New Here ,
Jul 01, 2019 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

Views

270

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
community guidelines

correct answers 1 Correct answer

LEGEND , Jul 01, 2019 Jul 01, 2019

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.

Votes

Translate

Translate
Community Expert ,
Jul 01, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
LEGEND ,
Jul 01, 2019 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.

Votes

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
community guidelines
Community Expert ,
Jul 01, 2019 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
New Here ,
Jul 01, 2019 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

Votes

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
community guidelines
Community Expert ,
Jul 01, 2019 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%">

Wappler, the only real Dreamweaver alternative.

Votes

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
community guidelines
LEGEND ,
Jul 02, 2019 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

Votes

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
community guidelines
LEGEND ,
Jul 02, 2019 Jul 02, 2019

Copy link to clipboard

Copied

Puddingsp  wrote


How To Align Images Side By Side

Ugh...example using 'float'.

Votes

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
community guidelines
New Here ,
Jul 02, 2019 Jul 02, 2019

Copy link to clipboard

Copied

LATEST

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)

Votes

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
community guidelines