NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Responsivní stránka - obrázky

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
David Rybář
Člen
Avatar
David Rybář:22.1.2020 14:47

Tady je mé HTML:

<!DOCTYPE html>
<html>
<head>
        <title>Image gallery</title>
        <link rel="stylesheet" type="text/css" href="imgg.css">
        <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
</head>
<body>
        <h1>Image gallery</h1>


                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1579198203629-e9aed4d27e3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1834&q=80"></div>

                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1578241561880-0a1d5db3cb8a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"></div>

                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1578165219176-ece04edbd053?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"></div>



                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1578167597239-14f8fc680b6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1856&q=80"></div>

                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1577993625454-1dec02cedd4b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=659&q=80"></div>

                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1577998076239-ea6d9a7dcd82?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"></div>




                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1577949239703-4e1d8aa72824?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80"></div>

                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1577643816920-65b43ba99fba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"></div>

                <div class="img-hover-zoom img"><img src="https://images.unsplash.com/photo-1577180234245-9d43488a6722?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=635&q=80"></div>




        <p>@ made with love. 2020</p>




</body>
</html>

Tady je mé CSS:

/*make a beautiful "gradient" backgroudn*/
body {
         background-image: linear-gradient(#ff9a9e, #fad0c4);
}
img {
        /*scales width for exactly 3 images on one page + margin*/
        width: 30%;
        height: auto;
        float: left;
        margin: 1.66%;
    border-radius: 20px;
    box-shadow: 10px 10px 5px 0px #33322e;
    background-color:#33322e;
        }


h1 {
font-family: 'Dancing Script', cursive;
        font-size: 80px;
        margin-bottom: 30px;
        text-align: center;
        color: #FFF;
        text-shadow: 1px 1px 1px #33322e;
}

p {
        margin-left: 1.66%;
  font-family: "Dancing script";
  text-shadow: 1px 1px 1px #33322e;
}

/*super cool smooth zoom efect when hover over image */
 .img-hover-zoom:hover img {
        transform: scale(1.1);
        transition: transform .5s ease;
 }

Nedivte se poznámek, jsem tak nějak zvyklý se učit a psát si tudíž i poznámky v angličtině))

Zkusil jsem: Přišel jsem na to, že toho jednoduše docílím pokud nastavím img { height: auto; }. Problém je, že pak nemají obrázky stejnou velikost. Chtěl bych aby si obrázky udržely 450px height a zároveň se chovaly stejně jako když dáme height na auto.

Chci docílit: Snažím se dosáhnout toho aby se obrázky zmenšovaly se stránkou - byly responsivní. Pokud zmenším stránku, zmenší se i obrázky a nebudou se deformovat.
Milionkrát díky za radu

 
Odpovědět
22.1.2020 14:47
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23.1.2020 7:41

Vv komentarich mas preklepy a slova spatne
Takze chces, aby meli max-height:450px nebo min-height:450px?
A kdyby nic z toho nedelalo, co chces, jeste se da definovat height tomu divu, ve kterem obrazek mas.
A nechces zkusit naucit se pracovat s css-bootstrap? Tam je class img-responsive (v jine verzi bt se to mozna jmenuje jinak)
https://getbootstrap.com/…tent/images/#…
z css si pak vytahnes, jak to delaji.

 
Nahoru Odpovědět
23.1.2020 7:41
Avatar
David Rybář
Člen
Avatar
Odpovídá na Peter Mlich
David Rybář:23.1.2020 15:27

No vidíš, ani jsem si to po sobě nepřečetl, díky za opravu :)
Jj na Boostrap se chystám hned potom. Chci se nejdřív naučit co nejvíc v HTML a v CSS, mám pak samozřejmě v plánu Bootstrap, SASS, Java script, Jquery...
Už jsem to vyřešil tak, že jsem si našel obrázky ve stejném rozlišení. Problém teď je, že nemám body přes celou stránku, což vůbec nechápu, s tím jsem se setkal poprvé. Když stránku zmenším pod nějakých 850x715 začne se celý body deformovat..
HTML

<!DOCTYPE html>
<html>
<head>
        <title>Image gallery</title>
        <link rel="stylesheet" type="text/css" href="imgg.css">
        <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
</head>
<body>
        <h1>Image gallery</h1>


                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\1.jpg"></div>

                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\2.jpg"></div>

                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\3.jpg"></div>



                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\4.jpg"></div>

                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\5.jpg"></div>

                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\6.jpg"></div>




                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\7.jpg"></div>

                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\8.jpg"></div>

                <div class="img-hover-zoom img"><img src="C:\Users\rybor\OneDrive\Plocha\photos\9.jpg"></div>




        <p>@ made with love. 2020</p>




</body>
</html>

CSS

/*make a beautiful "gradient" background*/
body {
   background-image: linear-gradient(#ff9a9e, #fad0c4);
 }

  img {
        /*scales width for exactly 3 images on one page + margin*/

  box-shadow: 10px 10px 5px 0px #33322e;
  background-color:#33322e;
  width: 30%;
  float: left;
  margin: 1.66%;
  border-radius: 20px;
        }


h1 {
        font-family: dancing script;
  font-size: 80px;
        margin-bottom: 30px;
  color: #FFF;
  margin-left: 1.66%;
  text-shadow: 2px 2px #33322e;
  }

  p {
    font-family: dancing script;
    margin-left: 1.66%;
  }


/*super cool smooth zoom efect when hover over image */
 .img-hover-zoom:hover img {
        transform: scale(1.1);
        transition: transform .5s ease;
 }
 
Nahoru Odpovědět
23.1.2020 15:27
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.