Skip to main content
M
mistershortcut
Known Participant
February 24, 2021
Answered

DW 19: Design View does not render pictures without image sizes in attributes correctly

  • February 24, 2021
  • 2 replies
  • 1595 views

I have the following HTML sourcecode:

 

 

 

<img src="example.jpg" width="400" height="600" alt="" />

 

 

 

 

The image is rendered correctly in the design view.

Now I apply CSS to it:

 

 

 

img { width: 30em; height: auto; }

 

 

 

 

Result:
The value "30em" is rendered correctly, the value "auto" is ignored.

The rendered height of the picture is 600px.

How can I solve the task please?


In a browser the CSS works.

 

Thank you.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    @436298


    Nancy, I know that Design View ist NOT a browser.

    Independent of that the intended functionality of the design view is, that CSS is interpreted in the Design View.

     

    At the moment nobody likes to confirm, that "height: auto" is ignored in the Design View. It's OK. But it would be helpful for the discussion, when someone could confirm that.

    Thanks for your suggestion, I really appreciate, that you like to help me.

    But I do not want to set a width to figure, but to img.

    Your wrote "AUTO does not change the height of your image."

    That is not true.

    When you use my complete code of the last posting in a browser, you get an automatically calculated height. Depending on 1em. That is the intended function of the value "auto".

    I do not say anymore, that that does not work in Design View.

     

    You say, that I my understanding of the value is not correct.


    Design view is a throwback to the old Macromedia days and is NOT capable of interpreting advanced  CSS level 2 and level 3 specs.  That's why Live view was created.  Use them both or not, your choice.  

     

    See screenshots below.

     

    Design view:

     

    Same code in Live view:

     

    I can give you lots of other examples where CSS rendering is hideous or ignored in Design view. 

     

    2 replies

    Nancy OShea
    Nancy OShea
    Community Expert
    February 24, 2021

    Resize images to required size & optimize them for the web beforehand with Photoshop or similar raster image editor.

     

    CSS

    .img-fluid {

        max-width:100%;

        height: auto;

        display:block;

        vertical-align: baseline;

    }

     

    HTML:

    <img class="img-fluid" src="https://dummyimage.com/600x400" alt="placeholder">

     

    Nancy O'Shea— Product User & Community Expert
    M
    mistershortcutAuthor
    Known Participant
    February 24, 2021

    @436298

    Thanks for the suggestion.
    It is no option for me, because I need the width in the unit "em". And display: block does not fit my needs too.

    Can you reproduce, that the value "auto" for "height" is ignored in the design view?

    M
    mistershortcutAuthor
    Known Participant
    March 4, 2021

    At the moment nobody likes to confirm, that "height: auto" is ignored in the Design View. It's OK. But it would be helpful for the discussion, when someone could confirm that.

     

    I think that you have already confirmed that "height: auto" is ignored in Design View. As Nancy has stated, design view stems from a pre-CSS era and as such CSS may not be interpreted as it should while in Design View.

     

    This brings me to ask why you would want the image to be relegated to fixed dimensions. This does not fit into the realm of responsive design where a layout adjusts to the available realestate.


    @BenPleysier 

    You have misunderstood my initial posting.
    There is explicitly a relative CSS value for the width.

    O
    osgood_
    Brainiac
    February 24, 2021

     

    Just remove the width and height from the image tag, as below. The width/height are not needed as you are defining the width and height using css:

     

     

    <img href="example.jpg" alt="" />

     

     

    M
    mistershortcutAuthor
    Known Participant
    February 24, 2021

    @osgood_ 

    Removing the width and height attributes has no effect for the described problem.

    Can someone reproduce my problem?

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