Question

我正在尝试使用CSS GRID创建一个响应式个人网站，但是我陷入了图片无法正确调整大小的问题。我尝试了很多选项，包括对象适合度，图像最大宽度等，但找不到任何解决方案。我将在此处保留我的代码以及应该在移动和桌面视图中查看我的网站的外观的图像。任何帮助都感激不尽。非常感谢你！

How it looks on mobile与How is it supposed to look on mobile

How it looks on desktop与How is it supposed to look on desktop

function openSideMenu() {
    document.getElementById("navOpen").style.width = "200px";
    document.getElementById("nav").style.marginLeft = "200px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeSideMenu() {
    document.getElementById("navOpen").style.width = "0";
    document.getElementById("nav").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}

* {
  box-sizing: border-box;
}
body{
    overflow-x: hidden;
}
img{
	grid-column: 2/3;
    grid-row: 3/5;
    max-width: 100%;
}
.navOpen{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1; 
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px;
    transition: .7s;
    
}
.navOpen a{
    display: block;
    align-content: center;
    padding: 20px 30px;
    font-size: 18px;
    text-decoration: none;
    color:blanchedalmond;
    
}
.navOpen a:hover{
    color: aqua;
    transition: .4s;
}
.navOpen .close{
    position: absolute;
    top: 0;
    right: 22px;
    margin-left: 50px;
}
.social{
	grid-column: 2/3;
    grid-row: 1/2;
    text-align: right;
    font-size: 25px;
}
p{
    text-align: left;
    font-size: 25px;
}
.picture{
	grid-column: 2/3;
    grid-row: 4/5;
    margin-bottom: 0;
}

.home{
    display: grid;
    grid-gap: 35px;
    grid-template-columns: 0.3fr 2fr;
    grid-template-rows: 10px 60px 30px auto;
 
}
.nav{
    grid-column: 1/2;
    grid-row: 1/4;
}
.name{
  grid-column: 2/3;
    grid-row: 2/3;
}

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home Page</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/style-grid.css" type="text/css" media="all">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


</head>

<body class="home">
    <header class="social">
        <a href="https://github.com/" target="_blank">
            <i class="fab fa-github" style="color:black;"></i>
        </a>
        <a href="https://www.linkedin.com/" target="_blank">
            <i class="fab fa-linkedin" style="color: black;"></i>
        </a>
    </header>
    <aside class="nav">

        <span class="slide">
            <a class="w3-display-left" href="#" onclick="openSideMenu()">
                <i class="fas fa-angle-right fa-3x" style="color:black;"></i>
            </a>
        </span>
        <div id="navOpen" class="navOpen">
            <a href="#" class="close" onclick="closeSideMenu()">
                <i class="fas fa-times fa-lg" style="color:#806156;"></i>
            </a>
            <a href="#home">Home</a>
            <a href="#work">Work</a>
            <a href="#aboutme>">About me</a>
            <a href="#contact">Contact</a>
        </div>

    </aside>
    <p class="name">I'm <br>Jane Doe. </p>
    <div class="picture" style="background-color: #590E0E">

    </div>
    <img class="img" src="https://cdn1.imggmi.com/uploads/2019/1/5/e49bacb43cec031976a6a2731bc861d8-full.png" alt="picture of myself">

    <script src="js/javascript.js"></script>
</body>
</html>

CSS GRID布局图像调整大小和位置

0 个答案: