Galeria zdjęć HTML

pytanie zadane 9 grudnia 2022 w HTML i CSS przez michalMonster Początkujący (390 p.)

Siemka, muszę zrobić na zaliczenie przedmiotu w szkole galerie zdjęć w HTML i CSS. Większość zrobiłem sam ale mam problem z poprawnym wyświetleniem konkretnego obrazka w iframe. Problem polega na tym że nie wiem jak wycentrować obraz i jak zrobić żeby był on w odpowiedniej rozdzielczości np. 500x600. Drugim problemem jest że mam przesuwane menu obrazków ale przez to że jest ich dużo to zawijaja się one pod siebie, a chciałbym żeby one były w jednej linii. Proszę o pomoc. Tak to wygląda obecnie: https://imgur.com/a/WTpD8ui

Kod HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria zdjęć</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="title">
        <h1>Galeria Fotograficzna</h1>
    </div>
    <div class="bigimage">
        <iframe src="blank.html" frameborder="0" width="100%" height='100%' name='content'></iframe>
    </div>
    <div class="menu">
        <marquee onmouseover="this.stop()" onmouseout="this.start()">
            <ul class="gallery">
                <li class="thumbnail"><a href="images/1.jpg" target="content"><img src='images/1.jpg' alt=''></a></li>
                <li class="thumbnail"><a href="images/2.jpg" target="content"><img src='images/2.jpg' alt=''></a></li>
                <li class="thumbnail"><a href="images/3.jpg" target="content"><img src='images/3.jpg' alt=''></a></li>
                <li class="thumbnail"><a href="images/4.jpg" target="content"><img src='images/4.jpg' alt=''></a></li>
                <li class="thumbnail"><a href="images/5.jpg" target="content"><img src='images/5.jpg' alt=''></a></li>
                <li class="thumbnail"><a href="images/6.jpg" target="content"><img src='images/6.jpg' alt=''></a></li>
                <li class="thumbnail"><a href="images/7.jpg" target="content"><img src='images/7.jpg' alt=''></a></li>
                <li class="thumbnail"><a href="images/8.jpg" target="content"><img src='images/8.jpg' alt=''></a></li>
            </ul>
        </marquee>
    </div>
</body>
</html>

Kod CSS:

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');

*{
    background-color: rgb(22, 22, 22);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.title{
    font-family: 'Ubuntu', sans-serif;
    color: rgb(185, 185, 185);
    text-align: center;
    font-size: 20px;
    text-shadow: 7px 7px #414141;
    width: 100%;
    height: 10%;
    margin-top: 5px;
}

.thumbnail{
    max-width: 125px;
    max-width: 225px;
    margin: 15px;
}

.thumbnail img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.gallery{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style-type: none;
}

.menu{
    width: 95%;
    height: 10%;
    margin-top: auto;
    position: absolute;
    bottom: 110px;
    text-align: center;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.thumbnail img:hover{
    transform: scale(1.1);
    filter: saturate(20%);
}

.bigimage{
    width: 600px;
    height: 500px;
}

2 odpowiedzi

odpowiedź 9 grudnia 2022 przez Piotrek2713 Mądrala (5,520 p.)
wybrane 10 grudnia 2022 przez michalMonster

Najlepsza

To co masz w .gallery powinno być w body (Bo to jest element nadrzędny galerii — rodzic).

Każdy element o klasie thumbnail powinien być wyświetlany jako element blokowy w linii

display: inline-block;

albo elastyczny w linii

display: inline-flex

komentarz 9 grudnia 2022 przez michalMonster Początkujący (390 p.)

W jakim sensie w body? Chodzi o CSS czy HTML?

komentarz 9 grudnia 2022 przez Piotrek2713 Mądrala (5,520 p.)

O CSS.

body
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style-type: none;
}

komentarz 9 grudnia 2022 przez Piotrek2713 Mądrala (5,520 p.)

Tak wygląda CSS, który zmieniłem

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');
 
*{
    background-color: rgb(22, 22, 22);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
.title{
    font-family: 'Ubuntu', sans-serif;
    color: rgb(185, 185, 185);
    text-align: center;
    font-size: 20px;
    text-shadow: 7px 7px #414141;
    width: 100%;
    height: 10%;
    margin-top: 5px;
}
 
.thumbnail{
    display: inline-block;
    max-width: 125px;
    max-width: 225px;
    margin: 15px;
}
 
.thumbnail img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
 
body{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style-type: none;
}
 
.menu{
    width: 95%;
    height: 10%;
    margin-top: auto;
    position: absolute;
    bottom: 110px;
    text-align: center;
    margin-left: 2.5%;
    margin-right: 2.5%;
}
 
.thumbnail img:hover{
    transform: scale(1.1);
    filter: saturate(20%);
}
 
.bigimage{
    width: 600px;
    height: 500px;
align-self: center;
}

komentarz 9 grudnia 2022 przez michalMonster Początkujący (390 p.)

Ok no to jeden problem rozwiązany, a co w takim razie z drugim?

komentarz 9 grudnia 2022 przez Piotrek2713 Mądrala (5,520 p.)

A co jest nie tak jeszcze?

komentarz 9 grudnia 2022 przez michalMonster Początkujący (390 p.)

Obrazki w iframe powinny pokazywać się całe, a nie tak żebym musiał przewijać. Próbowałem usatwić ich rozmiar na sztywno w CSS ale nic nie dało i wygląda tak https://imgur.com/a/HQZC456

komentarz 9 grudnia 2022 przez Piotrek2713 Mądrala (5,520 p.)

Nie mam narazie obrazków, żeby na szybko sprawdzić u siebie, ale wydaje mi się, że te wymiary powinny być dla elementu iframe

komentarz 9 grudnia 2022 przez michalMonster Początkujący (390 p.)

Próbowałem różnych kombinacje które mi wydawały się poprawne ale nie działały. Jak chcesz to mogę podesłać obrazki których ja używam.

komentarz 9 grudnia 2022 przez Wiciorny Ekspert (281,530 p.)

@Piotrek2713, nie musi być... po to jest selektor klasy, który wyłapuje klase nie potrzeba tu żadnego rodzica tym bardziej body.

komentarz 11 grudnia 2022 przez Piotrek2713 Mądrala (5,520 p.)

Nie wiem, czy się zrozumieliśmy. Chodzi o to, że jeśli chce wyśrodkować bigpicture, to najlepiej, aby element nadrzędny miał

display: flex;
justify-content: center;

albo dać

.bigpicture
{
align-self: center;
}

zamiast

justify-content: center;

odpowiedź 9 grudnia 2022 przez VBService Ekspert (256,600 p.)

Obrazki w iframe powinny pokazywać się całe, a nie tak żebym musiał przewijać.

Może zamiast

<div class="bigimage">
  <iframe src="blank.html" frameborder="0" width="100%" height='100%' name='content'></iframe>
</div>

użyj

<div class="bigimage">
  <img id="bigimage">
</div>

i np. taki zapis dla poszczególnych .thumbnail (przykładowe obrazki)

          <li class="thumbnail">
            <a href="#" onclick="window['bigimage'].src='https://picsum.photos/id/6/600/900'">
              <img src="https://picsum.photos/id/6/200/300" alt="">                      
            </a>                      
          </li>
          <li class="thumbnail">
            <a href="#" onclick="window['bigimage'].src='https://picsum.photos/id/39/600/900'">
              <img src="https://picsum.photos/id/39/200/300" alt="">                      
            </a>               
          </li>

BTW, jeśli chcesz, aby ramka była pusta, możesz użyć wartości about:blank jako src

<iframe src="about:blank" name="content"></iframe>

iframe{
  border: 0;
  width: 100%;
  height: 100%;
}

komentarz 9 grudnia 2022 przez michalMonster Początkujący (390 p.)

Niestety nie mogę wykorzystać twojej propozycji ponieważ jednym z kryterium tego zadania jest wykorzystanie iframe

komentarz 10 grudnia 2022 przez VBService Ekspert (256,600 p.)

Spróbuj może przez dopasowanie wielkości ładowanego obrazka do wielkości iframe.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria zdjęć</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="title">
      <h1>Galeria Fotograficzna</h1>
    </div>
    <div class="bigimage">
      <!-- <iframe src="about:blank" name="content"></iframe> -->
      <iframe src="https://picsum.photos/id/6/595/395" name="content"></iframe>
    </div>
    <div class="menu">
      <marquee onmouseover="this.stop()" onmouseout="this.start()">
        <ul class="gallery">
          <li class="thumbnail">
            <a href="https://picsum.photos/id/6/595/395" target="content">
              <img src="https://picsum.photos/id/6/200/200" alt="">         
            </a>                
          </li>
          <li class="thumbnail">
            <a href="https://picsum.photos/id/39/595/395" target="content">
              <img src="https://picsum.photos/id/39/200/200" alt="">           
            </a>                
          </li>
          <li class="thumbnail">
            <a href="https://picsum.photos/id/41/595/395" target="content">
              <img src="https://picsum.photos/id/41/200/200" alt="">                   
            </a>               
          </li>
          <li class="thumbnail">
            <a href="https://picsum.photos/id/69/595/395" target="content">
              <img src="https://picsum.photos/id/69/200/200" alt="">                   
            </a>               
          </li>
          <li class="thumbnail">
            <a href="https://picsum.photos/id/71/595/395" target="content">
              <img src="https://picsum.photos/id/71/200/200" alt="">                   
            </a>               
          </li>
          <li class="thumbnail">
            <a href="https://picsum.photos/id/133/595/395" target="content">
              <img src="https://picsum.photos/id/133/200/200" alt="">                 
            </a>               
          </li>
          <li class="thumbnail">
            <a href="https://picsum.photos/id/146/595/395" target="content">
              <img src="https://picsum.photos/id/146/200/200" alt="">                 
            </a>               
          </li>
          <li class="thumbnail">
            <a href="https://picsum.photos/id/201/595/395" target="content">
              <img src="https://picsum.photos/id/201/200/200" alt="">                 
            </a>               
          </li>
        </ul>
      </marquee>
    </div>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');

*{
  background-color: rgb(22, 22, 22);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  list-style-type: none;
}
.title{
  font-family: 'Ubuntu', sans-serif;
  color: rgb(185, 185, 185);
  text-align: center;
  font-size: 20px;
  text-shadow: 7px 7px #414141;
  width: 100%;
  height: 10%;
  margin-top: 5px;
}
.thumbnail{
  display: inline-block;
  max-width: 200px;
  max-height: 200px;
  margin: 15px;  
}
.thumbnail img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 250ms;
}
.menu{
  width: 95%;
  text-align: center;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.thumbnail img:hover{
  transform: scale(1.1);
  filter: saturate(20%);
}
.bigimage{
  width: 600px;
  height: 400px;
}
iframe{
  border: 0;
  width: 100%;
  height: 100%;
}