如何在帶有容器的div中保持帶有動畫的圖像的長寬比？

Question

我沒想到那會這么難:-)

我想保持圖像的長寬比始終正確。 無法獲得解決方案？？？

 .img-container { height: 95vh; overflow: hidden; } .img { height: 100%; background-image: url(https://www.fillmurray.com/640/360); background-size: 110% 110%; background-position: center center; animation: shrink 5s infinite alternate; } @keyframes shrink { 0% { background-size: 110% 110%; } 100% { background-size: 100% 100%; } } 

 <section class="container" id="top"> <div class="img-container"> <div class="img"></div> </div> </section> 

Answer 1

我將動畫scale()而不是background-size 。 動畫將更加流暢。

 .img-container { height: 95vh; overflow: hidden; } .img { height: 100%; background-image: url(https://www.fillmurray.com/640/360); background-size: 110% 110%; background-position: center center; animation: shrink 5s infinite alternate; } @keyframes shrink { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } 

 <section class="container" id="top"> <div class="img-container"> <div class="img"></div> <h1>Automated condition monitoring</h1> </div> </section> 

如果要防止圖像拉伸，請使用background-size: contain; 或background-size: cover;

 .img-container { height: 95vh; overflow: hidden; } .img { height: 100%; background-image: url(https://www.fillmurray.com/640/360); background-size: cover; background-position: center center; animation: shrink 5s infinite alternate; } @keyframes shrink { 0% { transform: scale(1.1); } 100% { transform: scale(1); } } 

 <section class="container" id="top"> <div class="img-container"> <div class="img"></div> <h1>Automated condition monitoring</h1> </div> </section>