Question

启动页面时，将调整图像大小。当我离开窗口的全屏然后放回原位时，图片将恢复为正常大小。仅在计算机上此问题发生在手机上就可以了。

如果想查看=> sanko.surge.sh，我网站的网址

HTML：

<div>
    <h3>Qui sommes nous ?</h3>
    <div class="corpsDePresentation">
        <img class="ImgEquipe" src="trouba.jpg"/>
        <p>"SANKO" o..o. <br/><br/>
           En effet SANKO ...
        </p>
    </div>
</div>

CSS：

.ImgEquipe {
    height: 300px;
    width: 350px;
    border: 1px solid black;
    margin-right: 3vw;
}

.corpsDePresentation {
    display: flex;
    padding: 5vh 5vw;
    margin-bottom: 20vh;
}

Answer 1

哈哈，真令人沮丧！

幸运的是，它很容易修复。我们只需要调整您的img，以使纵横比永远不会被弄乱。

另外，对于移动设备，您的宽度会变怪，因为在触发媒体查询时，Bootstrap或您使用的任何CSS库都会替换您的宽度。对于这种情况，最简单的解决方法可能就是打一个简单的媒体查询。

.ImgEquipe { 
    display: block;
    height: 100%;
    width: 100%;
    max-height: 300px;
    max-width: 350px;
    border: 1px solid black;
    margin-right: 3vw;
}

@media only screen and (max-width: 500px) {
  .ImgEquipe {
    height: 100%;
    width: 100%;
  }
}

如果要包括更多的特异性，可以用.corpsDePresentation .ImgEquipe { ... }来命名。

启动页面时，将调整图像大小

1 个答案: