如何使圖像響應 css

Question

我有一個 gif 放在我的屏幕上，但它沒有正確調整大小。 這是代碼：

  import broomAndText from './ezgif.com-video-to-gif-3.gif';
import './spinner.css';

function myGif() {

    return <html><body><div class="imgContainer"><img src={broomAndText} alt="broomAndText"/></div></body></html>
    
}

export default myGif;

然后在我的 css 中，我有這個：

.imgContainer {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

在桌面上看起來不錯，請在下面找到附件圖片。

我在糟糕的時候參加了 SS，哈哈。 這是第二個，在手機上：

我不確定如何解決，這個。 謝謝您的幫助：）

Answer 1

將您的圖像元素放在具有自動高度和自動寬度的 div 中。 那應該自動縮放您的圖像:)

Answer 2

import broomAndText from './ezgif.com-video-to-gif-3.gif';
import './spinner.css';

function myGif() {
    return <html><body><div class="imgContainer"><img src={broomAndText} alt="broomAndText" width="100%" height="auto"/></div></body></html>
}

export default myGif;

如何使圖像響應 css

問題描述

2 個解決方案

解決方案1
0 2021-04-25 20:29:07

解決方案2
0 2021-04-25 20:39:40

如何使圖像響應 css

問題描述

2 個解決方案

解決方案1 0 2021-04-25 20:29:07

解決方案2 0 2021-04-25 20:39:40

解決方案1
0 2021-04-25 20:29:07

解決方案2
0 2021-04-25 20:39:40