使用img标签src属性在HTML中显示图像和样式在CSS中有什么区别？ [英] What is the difference between using img tag src attribute in HTML to display image and styling it in CSS?

问题描述

结果是一样的，但是我想在HTML中使用img标签src属性来设置图像和CSS中的样式图像是有区别的。例如：

在HTML中：

 < img src = //notrealdomain.com/some.png\"> 
  

和

p>

 < img id =my-picsrc => 
  

在CSS中：

 ＃my-pic {
 background-image：url（// notrealdomain.com/some.png）
} 
  

解决方案

让我们看看比较。

仅仅提供 background-image 属性是不够的，因为 img 元素没有固有的 height 或 width 和 background-image t以与设置 src 属性相同的方式自动提供。因此，没有声明的尺寸，CSS应用的图像不显示。

 ＃my-pic {background-image：url placehold.it/150);}

 < img src =// placehold.it/150/>< img id =my-picsrc =/>  

您可以强制 img 标记具有 width 和 height 等于 background-image 的值，如果你希望它的行为类似于 src 应用的图片。

 ＃my-pic {display：inline-block; width：150px; height：150px; background-image：url（// placehold.it/150 );}

 < img src =// placehold.it/150/>< img id =my-picsrc =/>  

但这有局限性，原生 img $ c> src 属性组合没有，例如只能定义 height 或 <$

 ＃my-pic {display：inline-block; width：150px; background-image：url（// placehold.it/300);}

 < img src =// placehold.it/300width =150/>< img id =my-picsrc =/>   
 
 
 
此外，设置 width  code> height 到除了自然维度之外的任何东西，只会裁剪 background-image ，而不是强制约束它的方式<  
 
 
 
 
 
 
 ＃my-pic {display：inline-block; width：300px; height：150px; background-image：url（// placehold.it/300);}
 < img src =// placehold.it/300width =300height =150/>< img id =my-picsrc =/& code> 
 
 
 
 
 
 
还有其他属性可以用来实现各种结果， code> background-attachment ， background-clip ， background-origin   background-position ， background-repeat 和 background-size 。
 
 
 
但是如果你使用这些样式，你可能不应该使用 img 容器;  div 或某些其他类型的包含具有语义的元素将更适合该作业。
 
 
 
 更新： 
 
 
 
如果在 src 属性中定义的图像无法加载，  alt 属性的值显示为预期; 
 
 
 
 
 snippetdata-lang =jsdata-hide =false> 
 
 ＃my-pic {display：inline-block; width：150px; height：150px; background-image：url（http://placehold.it/150）;}＃my-pic-failed {display：inline-block; width：150px; height：150px; background-image：url（// failedtoload.png）;}  
 
 < img src =http://placehold.it/150alt =无法加载/>< img src =// failedtoload.pngalt =无法加载/> < img id =my-picsrc =alt =无法加载/>< img id =my-pic-failedsrc =alt =无法加载/>  
 
 
 
 
Result is the same, but I guess there is difference between using img tag src attribute in HTML for setting image and styling image in CSS. For example:

In HTML:
<img src="//notrealdomain.com/some.png">
and

In HTML:
<img id="my-pic" src="">
In CSS:
#my-pic {
    background-image: url(//notrealdomain.com/some.png)
}

解决方案
Let us see by comparison.

It isn't enough to simply supply a background-image property, because the img element has no inherent height or width and the background-image property can't provide that automatically in the same way that setting the src attribute does. So, without declared dimensions, the CSS-applied image doesn't show.



#my-pic {
    background-image: url(//placehold.it/150);
}

<img src="//placehold.it/150" />
<img id="my-pic" src="" />





You can force the img tag to have width and height equal to that of the background-image, if you want it to behave similarly to a src-applied image.



#my-pic {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-image: url(//placehold.it/150);
}

<img src="//placehold.it/150" />
<img id="my-pic" src="" />





But this has limitations that the native img and src attribute combination don't have, such as the ability to define just the height or width and retain natural constraints.



#my-pic {
    display: inline-block;
    width: 150px;
    background-image: url(//placehold.it/300);
}

<img src="//placehold.it/300" width="150" />
<img id="my-pic" src="" />





Also, setting the width and height to anything other than natural dimensions, will just crop the background-image, instead of force-constraining it the way img behaves natively.



#my-pic {
    display: inline-block;
    width: 300px;
    height: 150px;
    background-image: url(//placehold.it/300);
}

<img src="//placehold.it/300" width="300" height="150" />
<img id="my-pic" src="" />





There are other properties you can use to achieve various results, such as background-attachment, background-clip, background-origin, background-position, background-repeat, and background-size.

But if you're employing these styles, you probably shouldn't use an img tag as your container; a div or some other type of containing element with semantic meaning would be better suited for the job.

Update:

In case an image that is defined in the src attribute fails to load, the value of alt attribute is shown as expected; whereas an alt attribute given to the CSS-applied image is displayed at all times.



#my-pic {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-image: url(http://placehold.it/150);
}

#my-pic-failed {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-image: url(//failedtoload.png);
}

<img src="http://placehold.it/150" alt="Failed to load"/>
<img src="//failedtoload.png" alt="Failed to load"/>
<img id="my-pic" src="" alt="Failed to load" />
<img id="my-pic-failed" src="" alt="Failed to load" />





                        
这篇关于使用img标签src属性在HTML中显示图像和样式在CSS中有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！