草庐IT

segmented_img

全部标签

JavaScript - 从 HTML img src 获取字节大小

我想知道如何从带有HTML/JS的“img”标签的“src”中获取以字节为单位的大小。在上面的示例中,我基本上想知道“testpattern.gif”有多大(以字节为单位)。提前致谢。 最佳答案 现在是2017年,您现在可以使用ResourceTimingAPI在javascript中提取图像的transferSize、encodedBodySize、decodedBodySize:下面是访问页面上所有img的大小信息的代码(请参阅下面的警告):varimgElems=document.getElementsByTagName('i

html - 将类名分配给 <img> 标签而不是将其写入 css 文件?

我很想知道,为分配一个类名是否更好?标记在html文件中而不是直接写到css文件中?代替.columnimg{/*stylingforimagehere*/}我需要知道它们在网络性能方面是否存在差异?更新:对不起,假设问题是多个.columndiv内的标签并且所有图像都使用相同的样式。 最佳答案 简短的回答是直接向您想要设置样式的元素添加一个类确实是定位该元素并为其设置样式的最有效方式。但是,在现实世界的场景中,它是如此微不足道,根本不是一个值得担心的问题。引用SteveOuders(CSS优化专家)http://www.steve

html - css "background-image"显示不需要的边框,img "src"不显示

开始使用TwitterBootstrap,我遇到了一个奇怪的问题,我无法找出原因。当我使用以下方式渲染图像时:在CSS中:#logo{background-image:url(/Content/Images/logo.png);}图像显示有一个窄“边框”:尽管我找不到任何与此效果相关的内容。由于img-rounded类,Angular是开放的。渲染图像使用:按预期呈现:如何去除边框?我尝试过但没有成功的CSS代码:边框:无;颜色:蓝色;背景颜色:蓝色;border-style:none; 最佳答案 答案是不使用标记并尝试设置back

html - Canvas - 合并两张图片,返回一个 img html 对象?

我有两个具有不同srcurl的htmlimg对象。我想合并这两张图片(使用Canvas),并创建一个合并的img对象。这可能吗?怎么办? 最佳答案 你可以使用drawImage.Demo.代码:varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");varimg1=loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png',main);varimg2=loadIma

image - 根据 max-width 按比例缩放 div(类似于 img 缩放)

是否可以只使用CSS按比例缩放div,就像img一样?这是我的第一次尝试:http://dabblet.com/gist/1783363例子div{max-width:100px;max-height:50px;}img{max-width:100px;max-height:50px;}实际结果Container:200x100Div:100x50Image:100x50Container:50x100Div:50x50//Iwantthistobe50x25,liketheimageImage:50x25 最佳答案 由于以百分比设

HTML img align ="middle"不对齐图像

我希望图像居中对齐。图像大小以像素为单位固定。所以我想要的是这样的-.我所做的是-但是我越来越-我希望它能够响应。谁能帮帮我? 最佳答案 align=middle属性设置垂直对齐方式。要使用HTML设置水平对齐方式,您可以将元素包装在center元素中并删除您现在拥有的所有CSS。如果您更愿意在CSS中实现,有几种方法。一个简单的方法是在容器上设置text-align: 关于HTMLimgalign="middle"不对齐图像,我们在StackOverflow上找到一个类似的问题:

css - 哪种方式加载巨大的图像(canvas vs img vs background-image)?

我想要什么目前我有一张4000x4000的png图片.使用后tinypng.org它变成了一个288KB的文件。现在我想要以最快的方式加载图像,将其放置在DOM中并能够在其上绘制大量Canvas。我测试了一些,结果令我震惊。我测试了什么我做了3次测试,只检查加载速度。(423毫秒)(138毫秒)(501毫秒)CSSbackground-image标签是最快的。问题那么,使用是不是一种不好的做法?标记来显示巨大的(背景)图像并使用一些肮脏的CSS以便能够在其上绘制Canvas?还是在我的情况下使用Canvas更好,而不用担心加载时间更长? 最佳答案

html - "An img element must have an alt attribute, except under certain conditions."什么条件?

这是W3C验证程序为没有alt属性的img标签打印的内容:“img元素必须具有alt属性,在特定条件下除外。”我找不到任何关于它的信息...至少除了alt标签的内容之外什么都找不到。有人知道什么条件吗? 最佳答案 W3概述原因:Insomecasesanimageisincludedinapublisheddocument,buttheauthorisunabletoprovideanappropriatetextalternative.Insuchcasestheminimumrequirementistoprovideacapt

html - 如何让 DIV 像 IMG 一样用作 CSS Sprite ?

我已经编写了代码,可以根据页面中的IMG标签自动创建CSSSprite,并将它们替换为具有(我认为的)适当CSS的DIV,以将Sprite图像定位为背景,让适当的部分显示出来——问题是我无法让DIV充当IMG的替代品。如果我将默认的“显示”值设置为“block”,那么如果原始IMG位于某些文本的末尾,则替换DIV将跳到文本后的下一行(这当然是我会期望有display:block做的事情)。如果我将“显示”更改为内联,则DIV将与文本保持在同一行,但它会忽略我设置的“宽度”和“高度”并折叠。我试过将的放在DIV中,但它只占用足够的宽度来包含nbsp。我尝试过将显示设置为所有可能的值(包括

html - img 上的 href 链接

您好,我有以下代码可以在img上添加一些链接。它在FF中运行良好,但在IE中运行良好。如果将链接放在img之上,IE似乎无法点击  最佳答案 你只是想让图片可以点击吗?你不能有那不是正确的html标签。任一地点里面像这样:另一种方法是设置一个带有图像背景图像的div,然后在其中设置一个链接,使链接显示:block并使其成为div的整个宽度和高度,整个内容都可以点击。 关于html-img上的href链接,我们在StackOverflow上找到一个类似的问题: