圖像的大小調整不斷重演

Question

我試圖做一個相當簡單的網頁，有一個橫幅圖像 和簡單的動畫（字幕仿真）。我想在頁面中的響應圖像 。問題是，每當動畫循環迭代，圖像大小調整重演。

.marquee { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    animation: marquee 17s linear infinite; 
 
    -webkit-animation: marquee 17s linear infinite; 
 
    background-color: red; 
 
} 
 
    
 
.marquee:hover { 
 
    -webkit-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 
     
 
.fixed-ratio-resize{ 
 
    height:auto; 
 
    max-width: 90%; 
 
}

<img src="image.png" class="fixed-ratio-resize" alt="banner" /> 
 

 
<p class="marquee"> 
 
    Do not use marquee tag for improve accessibility and readability. 
 
</p>

我想「脫離」從圖像大小調整的動畫，即有圖像調整，只有當視口被更改。 MTIA

Answer 1

如果需要響應圖像，然後你必須遵循此代碼對你的固定比例調整大小的CSS。你可以設置寬度：90％，如果你想。

.fixed-ratio-resize { 
    height: auto; 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
} 

這是一個帶有選取框模擬的例子。具有90％的圖像寬度。如果您有任何問題，請發表評論。

@keyframes marquee { 
 
    0% { text-indent: 430px } 
 
    100% { text-indent: -485px } 
 
} 
 

 
@-webkit-keyframes marquee { 
 
    0% { text-indent: 430px } 
 
    100% { text-indent: -485px } 
 
} 
 
.marquee { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    animation: marquee 17s linear infinite; 
 
    -webkit-animation: marquee 17s linear infinite; 
 
    background-color: red; 
 
} 
 

 
.marquee:hover { 
 
    -moz-animation-play-state: paused; 
 
    -webkit-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 

 
.fixed-ratio-resize { 
 
    height: auto; 
 
    width: 90%; /*YOU CAN USE 100% if you want */ 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 

<img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="fixed-ratio-resize" alt="banner "> 
 
<p class="marquee">Do not use marquee tag for improve accessibility and readability.</p>