代码之家  ›  专栏  ›  技术社区  ›  maddie

调整不同大小的横向图像的大小,以适应带圆形框架的固定纵向

image-resizing image css html
  •  0
  • maddie  · 技术社区  · 6 年前

    我有很多不同尺寸的风景图片: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 here HTML: 

    <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>
    1 回复  |  直到 6 年前
        1
  •  0
  •   Xhynk    6 年前

    正如@paulie_d所提到的,最好(而且经常是标准)的情况是,你将照片裁剪成具有一致且相似的面部位置,这将有效地解决你的两个问题。但是,除非这样:

    定位文本将是相对直接的,一些创造性的定位基于圆,并使用一些溢出容器。但你的大问题是脸作为焦点。有一些面部识别API可以让您找到面部的大致中心,例如 Face-API.js 和 Tracking.js . 这将允许您将图像相对定位在圆形遮罩的后面,定位在其表面的中心。

    然而,你可以看到这是在哪里自找麻烦。它不认识的任何面孔都需要一个回退或覆盖,更不用说学习一个新的库(不一定是 坏的 我想是的)。

    老实说,只有26张照片,如果你只花5分钟的时间裁剪,你可能会过得更好,得到更一致的结果。

    推荐文章
    Dmitry  ·  在Python中是否有可以处理8位以上颜色的imresize模拟?
    7 年前
    Téwa  ·  反应本机-如何使图像宽度100%和垂直顶部?
    7 年前
    johram pong  ·  水印上传图像,无需调整图像宽度和高度
    8 年前
    user198923  ·  垂直模式下移动浏览器的最佳图像宽度是多少?
    8 年前
    Henrique D. B.  ·  Jquery未调整滑块上的图像大小
    11 年前
    beerwin  ·  在Delphi中调整png图像的大小-不正确的alpha通道
    11 年前
    ryanjdillon  ·  旋转,然后使用ImageMagick和bash调整图像目录的大小
    11 年前
    iRector  ·  使用PHP和cURL调整远程图像的大小
    12 年前
    iRector  ·  在不启用fopen包装的情况下,我可以使用URL作为imagecreatefromjpeg()的源吗?
    12 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号