可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

The HTML <img> element can have the width / height attribute, and it can also have the CSS width / height properties.

<img src="xxx.img" width="16" height="16" 
style="width: 16px; height: 16px"></img>

What's the difference between the HTML attribute and CSS property and should they have the same affect?

回答1:

A hot debate about the subject can be found here: Width attribute for image tag versus CSS

To sum it up:

The gain from declaring a width value and an height value (which may not be the original physical dimensions of the image) or from css declarations (like width: [valueX]; height: [valueY];) is that it helps speed up the rendering of the page. The browser knows how much space to allocate a particular area of the page: it will even draw image placeholders on a first draw, a first parsing+rendering of the page. When one does not define any width and height, then the browser has to download the image and then figure out its dimensions, space to allocate and then redraw the page.

This seems to be the most beneficial effect in my opinion.

回答2:

They have the same effect.

<img width="100" height="100" /> has been used for a long time, same with the widht/height properties of say.. an HTML table.

There is no difference whether you specify it on the element itself or within the CSS, though I now prefer using CSS so I can keep the HTML clear and concise.

Here's an example http://jsfiddle.net/N2RgB/1/

I've loaded the same image 4 times, both proportional and non-proportional using HTML attributes AND CSS properties.

There is absolutely NO difference.

回答3:

I made a comparison up at: http://jsfiddle.net/jF8y6/ with 4 different states. The main difference is the way it is used via external stylesheets in terms of the ability to resize images for different stylesheets (desktop, mobile, print, etc) and the flexibility it brings. If you hardcode the sizes then it stops the flexibility.

回答4:

http://www.w3schools.com/tags/tag_IMG.asp

I haven't used the image tag in a while for this purpose. But there is a difference, the attributes can be relative to the images dimensions, CSS style properties are absolute (either %, px, em...)

回答5:

The difference is in semantic and general approach rather than in how the rendering will work. :) I personally prefer to concentrate all things like width and heights within CSS classes and avoid to use both attributes like "width" and inline styles like "style='width:100px'", just because it results in nice logical separation - HTML markup tells what should be displayed and CSS rules - how exactly it will look.

回答6:

I can see a difference... Check the following code snippet out stolen from: http://jqueryui.com/resources/demos/button/icons.html

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<!-- redefine source of background-image -->
<style>
    .ui-icon { width: 64px; height: 64px; }
</style>

<script type="text/javascript" >
$(function(){
    $("img").button({
        icons: {
            primary: "ui-icon-locked"
        },
        text: false
    });
});
</script>
</head>
<body>

<img width="32px" height="32px"> <!-- size of img tag -->

</body>
</html>

This is the result:

回答7:

you can try this

<img src="some_pic.jpg" width="100" />

it's height will be auto-size.

and this

<img src="some_pic.jpg" style="width:100px" />

it's height will not be auto-size.

just try more,and you know the difference

What's the difference between the HTML width /

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

回答7:

收藏的人(0)

What's the difference between the HTML width /

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

回答7:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮