gpt4 book ai didi

html - 调整不同大小的风景图像以适应带有圆框的固定肖像

转载 作者:行者123 更新时间:2023-11-28 01:09:25 25 4
gpt4 key购买 nike

我有几十张不同尺寸的风景图片:522 x 393、496 x 473、428 x 336、359 x 240……等等。

我想在纵向框架 (300 x 340) 中显示它们,并带有圆形裁剪(悬停时变成圆形边框)。灵感is from here :

enter image description here enter image description here

但是,我的图像之间没有一致的尺寸。我遇到的一个大问题是,将鼠标悬停在某些框上时,名称和标题会出现在图像上。但是在一些不够高的图像上,名称和标题显示在黑色之上(包含图像的元素的默认背景)。如果我将太小的图像一直向下推,以至于名称/标题总是出现在照片的顶部,那么脸部通常会超出圆形裁剪范围。我不知道如何调整我的照片大小,以便:

  1. 名称和标题的背景在悬停时保持一致(照片背景或黑色填充背景)
  2. 脸部位于裁剪的圆圈内。

View my js fiddle hereHTML:

<div class="team-listing">
<ul>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/nkzsc7n9d/Aman.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/nkzsc7uz5/CCK.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/6x8a9vktt/Yin.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/5i6pl19f5/Emma.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/jomgge2bl/Yu-_Wei.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/gujb2tptt/Gaurav.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/fs94k8wpt/Guangyu.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/ubg9lo5a9/Ila.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/a42ttdn8h/Ivy.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/3qdqq3v75/Jacky.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/6kgw3kcsx/Jian.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/4fwj2idr5/Joseph.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/hwthldgcx/Neeraj.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/7mr2m5lch/Paul.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/n88e6450h/Peiti.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/8djssdqf5/image.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/sjnaqx6jl/Yu.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/3qdqq6v81/Priyank.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/55fbewold/Qi.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/oaikorb01/Sean.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/4354wfaxt/Yi.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/daxdd2zzl/Steve.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/yxcdu4dzl/Vinay.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/vqhuahltt/Vincent.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/agu7zo0e9/Wei.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/4fwj2l629/Weikang.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/atlm5u38h/Wei_An.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
<li>
<svg width="0" height="0">
<clipPath id="circle">
<circle cx="150" cy="150" r="100"></circle>
</clipPath>
</svg>
<a href="#">
<article>
<svg class="portrait" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- no automatic sizing for SVG image, width and height must be set -->
<image width="300" height="340" x="0" y="-20" xlink:href="https://s22.postimg.cc/epyy1v68h/Wenxin.jpg.jpg"></image>
<circle class="ring" cx="150" cy="150" r="100"></circle>
</svg>
<div class="bio">
<h2>Chun-Kang Chen</h2>
<h4>Article Subtitle</h4>
</div>
</article>
</a>
</li>
</ul>
</div>

最佳答案

正如@Paulie_D 所提到的,最好的(通常也是标准的)情况是您将照片裁剪为具有一致且相似的面部位置,这将有效地一次性解决您的两个问题。但是,除此之外:

通过一些基于圆圈的创意定位并使用一些溢出容器,定位文本会相对简单。但你的大问题是以脸为焦点。有一些面部识别 API 可以让您找到面部的大致中心,例如 Face-API.jsTracking.js .这些将允许您将图像定位在圆形面具的相对后面,锚定在他们脸部的中心。

不过,你可以看出这是在自找麻烦。它无法识别的任何面孔都需要回退或覆盖,更不用说学习新库了(我认为这不一定是事情)。

老实说,对于只有 26 张照片,如果您只花 5 分钟来裁剪它们,您可能会过得更好并获得更一致的结果。

关于html - 调整不同大小的风景图像以适应带有圆框的固定肖像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52189132/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com