Question

缩小浏览器后，我得到以下图片：

由于某种原因，当我从顶部到底部缩放浏览器时，图像可以完美缩放，但是从左到右或从右到左（测试页面的响应能力），图像根本无法缩放。

HTML

 <section>
    <div class="container-fluid mt-5">
        <div class="row" id="bio">
            <div >
                <img src="/img.png" id="bio-image" alt="">
            </div>
            <div class="ml-5 mr-5">
                <h2>Fueled by Innovation ...</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo similique illum obcaecati impedit voluptas
                        quasi, labore libero corrupti aliquam? Pariatur dolorem quae, error, officia, veritatis alias blanditiis
                        neque explicabo quos ad inventore distinctio odit necessitatibus odio iure repellendus. Doloremque
                        doloribus odio in illo officiis maxime magni molestiae delectus assumenda recusandae!</p>
             </div>
        </div>

    </div>
</section>

CSS

    #bio-image {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    height: 40vh;
    opacity: 0.5; 
}

    #bio {
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

我一直在搞乱它，但是还没有找到解决方案。任何帮助将不胜感激。

Answer 1

您需要将高度更改为“自动”并添加宽度。在下面检查正确的CSS

#bio-image {
      clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
      height: auto;
      opacity: 0.5; 
      max-width: 50vw;
  }

在此处https://codepen.io/rvtech/pen/abzzqBe

Answer 2

   #bio-image {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    height: auto;
    opacity: 0.5; 
}

    #bio {
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
   
}

<section>
    <div class="container-fluid mt-5">
        <div class="row" id="bio">
            <div >
                <img src="http://localhost:80/egs-api/XSCAssets/user/157381030912898154625dce70854c0ba.jpg" id="bio-image" alt="">
            </div>
            <div class="ml-5 mr-5">
                <h2>Fueled by Innovation ...</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo similique illum obcaecati impedit voluptas
                        quasi, labore libero corrupti aliquam? Pariatur dolorem quae, error, officia, veritatis alias blanditiis
                        neque explicabo quos ad inventore distinctio odit necessitatibus odio iure repellendus. Doloremque
                        doloribus odio in illo officiis maxime magni molestiae delectus assumenda recusandae!</p>
             </div>
        </div>

    </div>
</section>

剪切路径无法正确缩放

2 个答案: