CSS GRID Layout Image Изменение размера и позиционирования - PullRequest
Новая
       49

CSS GRID Layout Image Изменение размера и позиционирования

0 голосов
/ 05 января 2019

Я пытаюсь создать адаптивный персональный сайт с использованием CSS GRID, но я застрял в точке, в которой размер моего изображения изменяется неправильно. Я перепробовал множество вариантов, включая подгонку объекта, максимальную ширину изображения и т. Д., Но не смог найти никакого решения. Я оставлю здесь свой код и изображения того, как должен выглядеть мой веб-сайт как в мобильном, так и в настольном представлении. Любая помощь будет высоко ценится. Большое спасибо!

Как это выглядит на мобильном телефоне против Как это должно выглядеть на мобильном телефоне

Как это выглядит на рабочем столе против Как это должно выглядеть на рабочем столе 

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