草庐IT

html - CSS - 将图像转换成房子的形状

coder 2023-08-06 原文

我有以下 HTML:

<figure class="pimage">
  <a href="http://nathandasilva.co.uk/butlinps/property-item/schofield-road-loughborough-le11-4qj/">
    <img class="attachment-homeland_property_medium wp-post-image" width="330" height="230" alt="7-020130322113404" src="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg"></img>
  </a>
</figure>

根据我所见,使用以下 CSS:

.page-id-11 .pimage {
  padding: 17px !important;
  background-color: #FFF;
}

我想要做的是将图像(不扭曲)转换为基本房屋的形状,如下图所示:-

最佳答案

最好的选择是使用 svg

定义一个内联 svg clipPath( for maximum browser support ) 并将其应用于您的图像。

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <clipPath id="shape">
      <path d="M100,0 L200,60 L200,200 L0,200 L0,60z" />
    </clipPath>
  </defs>
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/200/200" x="0" y="0" height="200px" width="200px" />
  </a>
</svg>


房子的真实形状:

<svg width="0" height="0">
  <defs>
    <clipPath id="shape">
      <path d="M0.5,0 L0.74,0.145 L0.74,0.085 L0.80.085 L0.8,0.179 L1,0.3 L0.90,0.3 L0.90,1 L0.1,1 L0.1,0.3 L0,0.3z" />
    </clipPath>
  </defs>
</svg>

<svg width="300" height="300" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/300/300" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>


在不同的图像尺寸上应用相同的clipPath:

您还可以将相同的 clipPath 应用于不同的图像尺寸。

以下是 300×300、200×200、100×100、50×50、25×25、12.5×12.5 和 5×5 图像尺寸的示例。

<svg width="0" height="0">
  <defs>
    <clipPath id="shape">
      <path d="M0.5,0 L0.74,0.145 L0.74,0.085 L0.80.085 L0.8,0.179 L1,0.3 L0.90,0.3 L0.90,1 L0.1,1 L0.1,0.3 L0,0.3z" />
    </clipPath>
  </defs>
</svg>

<svg width="300" height="300" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/300/300" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="200" height="200" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/200/200" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="100" height="100" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/100/100" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="50" height="50" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/50/50" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="25" height="25" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/25/25" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="12.5" height="12.5" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/12.5/12.5" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="5" height="5" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/5/5" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>


将图像放入您的 website 上的容器中,如下图所示:

将您的 svg 代码更改为以下内容:

(注意:负边距(margin-top: -17px)被添加是因为你在 上有 padding: 17px。图片) (坐标是通过做一些简单的数学运算得到的)

<svg width="296" viewBox="0 0 1.286956522 1" height="230" style="margin-top: -17px;">
  <defs style="">
    <clipPath id="shape">
      <path d="M0.6434782609,0 L1.286956522,0.166666666667 L1.286956522,1 L0,1 L0,0.166666666667z"></path>
    </clipPath>
  </defs>
  <a xlink:href="#">
    <image y="-0.1" x="0" clip-path="url(#shape)" xlink:href="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg" height="1px" width="1.286956522px"></image>
  </a>
</svg>

关于html - CSS - 将图像转换成房子的形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27458993/

有关html - CSS - 将图像转换成房子的形状的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入,例如“100兆字节”或“1GB”,并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前,我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效,但前提是输入是倍数(“gigabytes”,而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以,功能正常,

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby - 将数组的内容转换为 int - 2

    我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值,但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗?ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值,你可以这样做:values=@input[x]

  4. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  5. ruby - 将散列转换为嵌套散列 - 2

    这道题是thisquestion的逆题.给定一个散列,每个键都有一个数组,例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案,递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[

  6. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在,我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式?我不这么认为……或者有什么rake任务可以重新生成样式吗? 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你,你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  10. ruby-on-rails - 使用 ruby​​ 将多个实例变量转换为散列的更好方法? - 2

    我收到格式为的回复#我需要将其转换为哈希值(针对活跃商家)。目前我正在遍历变量并执行此操作:response.instance_variables.eachdo|r|my_hash.merge!(r.to_s.delete("@").intern=>response.instance_eval(r.to_s.delete("@")))end这有效,它将生成{:first="charlie",:last=>"kelly"},但它似乎有点hacky和不稳定。有更好的方法吗?编辑:我刚刚意识到我可以使用instance_variable_get作为该等式的第二部分,但这仍然是主要问题。

随机推荐