Измените Пейзаж Изображения различных размеров, чтобы соответствовать фиксированному портрету с круговой рамкой - PullRequest
Новая
       67

Измените Пейзаж Изображения различных размеров, чтобы соответствовать фиксированному портрету с круговой рамкой

0 голосов
/ 05 сентября 2018

У меня есть десятки пейзажных изображений различных размеров: 522 х 393, 496 х 473, 428 х 336, 359 х 240 .... и т. Д. И т. Д.

Я хочу отобразить их в портретной рамке (300 x 340) с круговой обрезкой (которая становится круговой границей при наведении). Вдохновение отсюда :

enter image description here enter image description here

Однако среди моих изображений нет постоянных измерений. Одна из больших проблем, с которыми я сталкиваюсь, заключается в том, что при наведении курсора на некоторые поля имя и заголовок появляются над изображением. Но на некоторых изображениях, которые недостаточно высоки, имя и заголовок отображаются черным цветом (фон по умолчанию для элемента, содержащего изображение). Если я нажимаю слишком маленькие изображения до конца так, что имя / заголовок всегда появляется сверху фотографии, лицо обычно выходит за рамки круга. Я не знаю, как изменить размер моих фотографий, чтобы:

  1. фон имени и заголовка совпадает при наведении (либо фон фото, либо черный фон заливки)
  2. Лицо внутри круга.

Посмотреть мою скрипку JS здесь 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 Ответ

0 голосов
/ 05 сентября 2018

Как упомянул @Paulie_D, лучший (и часто стандартный) случай - это обрезка фотографий, чтобы получить одинаковое и одинаковое расположение граней, это эффективно решит обе ваши проблемы одним махом. Однако, за исключением:

Позиционирование текста было бы относительно прямым, с некоторым творческим позиционированием на основе круга и использованием некоторого контейнера переполнения. Но ваша большая проблема - это лицо в фокусе. Существует несколько API распознавания лиц, которые позволят вам найти приблизительный центр лица, например Face-API.js и Tracking.js . Это позволит вам расположить изображение относительно маски круга, привязанной к центру их лица.

Тем не менее, вы можете видеть, где это вызывает проблемы. Любые лица, которые он не распознает, нуждаются в отступлении или переопределении, не говоря уже об изучении новой библиотеки (что не обязательно плохо , что я полагаю).

Честно говоря, имея только 26 фотографий, вам, вероятно, будет лучше, и вы получите более последовательные результаты, если вы просто потратите 5 минут на их обрезку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...