时间戳

首页 > 解决方案 > wordpress html和css中的响应式图像

html - wordpress html和css中的响应式图像

问题描述

我试图在 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; }

标签： htmlcsswordpressimageresponsive

解决方案

尝试这个：

<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;

推荐阅读