html - 媒体查询，图像不会移动

Question

这是我网站的截图

你好！我目前正在学习前端开发语言。我想将我的图像移动到 div.kitchen-image 容器所在的位置......但它不会移动。我的查询代码是这样的：

    /*media queries*/
    
    @media only screen and (max-width: 600px) {
        nav{
            display: flex;
            flex-wrap: wrap;      
            line-height: 2;
        }
        .logo {
            margin:0 auto;
        }
        .nav-links ul li a{
            margin-left:15px;
            
        }
        .kitchen-image {
            height:200px;
        }
        .main-pic{
            width:400px;   
        }
    }

尝试更改图像本身的宽度和高度，但仍然没有结果。

标签： htmlcssflexboxresponsive-design

Answer 1

您可以使用 CSS 属性transform: translate() 在 Image 的类中使用此 CSS

例如：下面给出的坐标只是一个例子。

.kitchen-image {
        height:200px;
        transform: translate(50px, 100px);
    }