wordpress html 和 css 中的响应式图像

Question

我正在尝试在 wordpress 上制作响应式图像，但似乎无法使其正常工作。

<img class="alignheader wp-image-3295" src="image/wp-content/uploads/2021/07/banner-02-1-300x66.png" alt="" width="1920" height="424" /> 

<div style="text-align: center;"><a href="#"><img src="image/wp-content/uploads/2021/07/banner-09.png" alt="" width="500" height="&quot;289" /></a>

<a href="#"><img src="image/wp-content/uploads/2021/07/banner-10.png" alt="" width="500" height="&quot;289/" /></a></div> 

<div style="text-align: center;"><a href="#"> <img src="image/wp-content/uploads/2021/07/banner-4x.png" alt="bottom" class="alignbottom" />

这是我的css

.alignbottom { width: 100vh; 
height: 20vh; 
border: 3px solid tomato; 
object-fit: cover;
object-position: 0 0; }

Answer 1

试试这个：

<html>

<head>
<style>
    #img1{
        width: 100%;
        height: 100%;
        border: 3px solid tomato;
        object-fit: cover;
        object-position: 0 0;
    }
    .img-div{
        width: 400px;
        height: 300px
    }
</style>
</head>
    <div class="img-div">
        <img id="img1" src="YOUR_IMAGE_URL" />
    </div>
</html>

主要是： object-fit: cover;