как обрезать изображение и сделать его отзывчивым? - PullRequest
Новая
       29

как обрезать изображение и сделать его отзывчивым?

0 голосов
/ 17 октября 2018

Я не уверен, как сделать отсечение изображения и сделать его отзывчивым.до сих пор я использовал svg вот так, и он работает, но он не отвечает.хорошо, вот демонстрация того, что происходит в данный момент.https://codesandbox.io/s/vq4wx2y367 вот код 

 <img  src={require('./assets/fans.jpg')} alt='projectvoice' className='fans' />
            <svg width="0" height="0">
                <defs>
                    <clipPath id="myClip">    

                    <path d="M-20,150 a1,1 0 0,1 100,0" fill="blue" />

  <path d="M50,150 a5,5 0 0,1 210,0" fill="red" />

                    </clipPath> 


                </defs>
                </svg>

Я также пытался использовать команду круга, как это 

  <img src="http://maddesigns.de/SVG/clip-path-test_files/clouds.jpg" />
            <svg width="0" height="0">
              <defs>
                <clipPath id="myClip">
                  <circle cx="160" cy="280" r="180" />
                  <circle cx="325" cy="280" r="275" />
                </clipPath>
              </defs>
            </svg>

Я использую макет здесь, где, когда экран больше,скажем на ноутбуке, то 2 колонки появляются рядом.и правый столбец имеет изображение, подобное этому

enter image description here

, но когда оно появляется на мобильном телефоне, есть 2 столбца, которые отображаются один под другим иизображение занимает полную строку

должно отображаться что-то вроде этого enter image description here, и вот где оно не работает.

оно не отображается таким образом и даже невыровняйте должным образом

Я пытался использовать svg, но если есть что-то, что также может помочь, тогда я готов пойти по этому пути.

Пожалуйста, дайте несколько идей о том, как это сделать.

хорошо, вот демонстрация того, что происходит в данный момент.https://codesandbox.io/s/vq4wx2y367 В ситуации 1, когда 2 столбца расположены рядом, изображение не выглядит так, как показано выше для этой ситуации.тогда это очень маленькое изображение, и я хочу прикоснуться к нижней и правой стороне div.

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

1 Ответ

0 голосов
/ 17 октября 2018

Я не знаю, охватывает ли это все аспекты, которые вам нужны, но я бы, вероятно, просто обернул изображение в контейнер и обрезал его переполнением.Вы можете поиграть с этим, пока он не будет соответствовать вашему макету: 

.img-clip {
  overflow: hidden;
}

.img-clip img {
  min-height: 100%;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .img-clip {
    width: 50%;
  }

  .img-clip img {
    padding-left: 50%;
  }
}
<div class="img-clip">
  <img src="https://i.stack.imgur.com/xe7zl.png" alt='projectvoice' className='fans' />
</div>
...