• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zrobić żeby zdjęcie było do samej lewej ścian aż do samej prawej ściany?

VPS Starter Arubacloud
0 głosów
440 wizyt
pytanie zadane 10 sierpnia 2019 w HTML i CSS przez r.mar Początkujący (470 p.)

Dzień dobry! Walczę już od godziny żeby obrazek zaczynał się od samej lewej ściany aż do samej prawej ściany, czyli żeby dotykał ją dwoma ścianami.  A drugie, czy mógłby mi ktoś powiedzieć jak zrobić żeby ten obrazek wyglądał tak samo jak na podanym poniżej obrazku, czyli taki lekko ucięty. Będę wdzięczny.

Kod: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Company name</title>
        <meta name="description" content="Site about awesome company">
        <meta name="keywords" content="company, projects, computers, awesome site">
        <meta name="author" content="Jan Kowalski">
        <meta http-equiv="X-Ua-Compatible" content="IE=edge">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="main.css">
        
    </head>
         <body>
             <main>

                    <div class="wrapper"> <!--Navigation-->
                        <nav class="main-nav">
                        <img class="col-sm-2" class="img-fluid" src="img/LogoPokaz.png">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="discover.html">Discover</a></li>
                                <li><a href="services.html">Services</a></li>
                                <li><a href="pricing.html">Pricing</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="container">
                        <img class="chanable-image" src="img/homeoffice.jpg">
                    </div>
             
                 </main>
                <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
                <script src="js/bootstrap.min.js"></script>
        </body>
</html>
:root {
    --primary: #ddd;
    --dark: #333;
    --light: #fff;
    --shadow:0 1px 5px rgba(104,104,104,0.8);
}

html{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);
}

body{
    background: #ccc;
    margin: 30px 50px;
    line-height: 1,4;
}

img {
    max-width: 100%;
}


.wrapper {
    display: grid;
    grid-gap: 20px;
}

.main-nav ul {
    display: grid;
    grid-gap: 70px;
    padding: 0;
    list-style: none;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    float: right;

}

.main-nav a {
    background: var(--primary);
    display: block;
    text-decoration: none;
    padding: 0.8rem;
    text-align: center;
    color: var(--dark);
    text-transform: uppercase;
    font-size: 1.1rem;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}
.main-nav a:hover {
    background: var(--dark);
    color: var(--light);
}
@media all and (max-width:30em){
    .main-nav ul{
        display: block;
        width: 100%
    }
}

.chanable-image{
    width: 100%;
    height: 50%;
    float: left;
}



Przed:

 

Po:

1 odpowiedź

0 głosów
odpowiedź 11 sierpnia 2019 przez lateM Pasjonat (17,660 p.)

Może wstaw ten obrazek jako tło elementu w CSS'ie? Jeśli chcesz użyć img a potem dodać nad nim tekst, to będziesz się musiał bawić z pozycjonowaniem absolutnym (przy którym łatwo o niespodziewane efekty na mniejszych rozdzielczościach urządzenia). 

  background: center/cover url("adres-obrazka.jpg") no-repeat; 

 

Podobne pytania

0 głosów
2 odpowiedzi 275 wizyt
0 głosów
1 odpowiedź 649 wizyt
pytanie zadane 23 października 2019 w HTML i CSS przez Squbany221 Użytkownik (640 p.)
0 głosów
1 odpowiedź 530 wizyt
pytanie zadane 5 listopada 2017 w HTML i CSS przez RAD Obywatel (1,810 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...