Skip to main content
chrisd97035151
Participant
March 21, 2017
Answered

Whats happening here?

Ok so I have an image(top) in my portfolio scaled it weird, but I scaled the image down (bottom)and it still looks the same

This topic is closed to new replies. Start a new post to keep the conversation going.
BenPleysier
BenPleysierCorrect answer
Community Expert
March 21, 2017

The intrinsic dimensions of the image are 500 x 187 pixels. When you change these dimensions to read 500 x 500, then you are changing the height/width ratio resulting in a distorted image.

Also not sure why you are using OBJECT to embed the image. Although this is correct usage, it may be better to have a look at using the IMG tag.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
View reply

4 replies

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
March 21, 2017

The intrinsic dimensions of the image are 500 x 187 pixels. When you change these dimensions to read 500 x 500, then you are changing the height/width ratio resulting in a distorted image.

Also not sure why you are using OBJECT to embed the image. Although this is correct usage, it may be better to have a look at using the IMG tag.

Translate
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
chrisd97035151Author
Participant
March 21, 2017

So where would I put the IMG tag?

Translate
Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
March 21, 2017

Rather than using <object> you would use <img> as in...

<img src="image/portfolio/Sword.PNG" alt="a sword">

...you then add css to your stylesheet to control the image width...

img[alt="a sword"] {

     max-width:500px;

}

The max-width setting of 500 pixels will allow the image to scale up to 500 pixels wide (with the height being calculated automatically using the image's own aspect ratio), it will scale down with its parent element in smaller screens if that parent element is set to a % or VW/VH setting.

HTML tutorial: http://www.w3schools.com/html
CSS tutorial: http://www.w3schools.com/css

DW really assumes you have both under your belt to work with it efficiently.

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices