{"action":"opened","issue":{"url":"https://api.github.com/repos/ADHO/dhconvalidator/issues/66","repository_url":"https://api.github.com/repos/ADHO/dhconvalidator","labels_url":"https://api.github.com/repos/ADHO/dhconvalidator/issues/66/labels{/name}","comments_url":"https://api.github.com/repos/ADHO/dhconvalidator/issues/66/comments","events_url":"https://api.github.com/repos/ADHO/dhconvalidator/issues/66/events","html_url":"https://github.com/ADHO/dhconvalidator/issues/66","id":318523436,"number":66,"title":"Do not specify both @height and @width on img elements","user":{"login":"cmsmcq","id":4857689,"avatar_url":"https://avatars1.githubusercontent.com/u/4857689?v=4","gravatar_id":"","url":"https://api.github.com/users/cmsmcq","html_url":"https://github.com/cmsmcq","followers_url":"https://api.github.com/users/cmsmcq/followers","following_url":"https://api.github.com/users/cmsmcq/following{/other_user}","gists_url":"https://api.github.com/users/cmsmcq/gists{/gist_id}","starred_url":"https://api.github.com/users/cmsmcq/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cmsmcq/subscriptions","organizations_url":"https://api.github.com/users/cmsmcq/orgs","repos_url":"https://api.github.com/users/cmsmcq/repos","events_url":"https://api.github.com/users/cmsmcq/events{/privacy}","received_events_url":"https://api.github.com/users/cmsmcq/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-27T19:28:10Z","updated_at":"2018-04-27T19:28:10Z","closed_at":null,"author_association":"NONE","body":"The HTML generated by dhconvalidator currently includes img elements of the form `<img src=“Pictures/foo.jpg\" alt=\"\" class=\"graphic\" width=\"100%\" height=\"100%”/>`. \r\n\r\nThis causes vertical stretching (and possibly vertical compression in some cases), as the browser seeks to force the image into a height/width ratio which matches the ratio of the current container width (the column width, in the output I've seen) to whatever the browser thinks `height=\"100%\"` means.  (Safari, at least, takes it to mean the current display-window height.)  On some images, the distortion is not very noticeable; on others it is very noticeable and unacceptable.\r\n\r\nIn my experience I get much better results specifying width only, because then the height of the image defaults to whatever is necessary to give the image its native height/width ratio.  I believe this is what dhconvalidator should do:  img elements should take the form `<img src=“Pictures/foo.jpg\" alt=\"\" class=\"graphic\" width=\"100%\" />` instead of that shown above.\r\n\r\nActually, I believe that it is currently held to be better practice not to use the `width` and `height` attributes at all, but to use CSS, in a `style` attribute if necessary.   So I think some Web experts would recommend the form  `<img src=“Pictures/foo.jpg\" alt=\"\" class=\"graphic\" style=\"width: 100%;\" />` instead.  That would work for me, too.\r\n\r\nI attach a screen shot showing a browser displaying the HTML in a DHC file I generated half an hour ago, showing the vertical distortion of an image, and a second screen shot showing the same browser displaying a version of the HTML in which the `height=\"100%\"` attributes have been deleted.\r\n\r\n\r\n\r\n![screen shot 2018-04-27 at 1 26 03 pm](https://user-images.githubusercontent.com/4857689/39381228-b087684e-4a1e-11e8-943a-bc0ca947c347.png)\r\n\r\n![screen shot 2018-04-27 at 1 25 54 pm](https://user-images.githubusercontent.com/4857689/39381268-cb9f0ab0-4a1e-11e8-8c6c-2c88692df55e.png)\r\n"}}
{"actor":{"display_login":"cmsmcq"}}