Jak sformatować obraz za pomocą HTML i CSS

Question

#r_s_ad {
  width: 12.5%;
  height: 40%;
  background: #FFF;
  position: absolute;
  top: 20%;
  right: 0.2%;
  margin: 0%;
  padding: 0%;
}

#r_s_ad img {
  width: 560%;
  height: 150%;
  margin: 0%;
  padding: 0%;
}

<div id=r_s_ad>
  <div id="l_s_ad">
    <img src="snetimages/Bop.png" alt="Birds of Prey film poster">
    <img src="snetimages/it.png" alt="It chapter 2 film poster">
  </div>
</div>

Próbowałem użyć właściwości top, aby spróbować sformatować obraz, ale to nie działa. To część witryny kinowej, którą robię na zlecenie na studia. Chciałbym, aby znajdował się na górze znacznika DIV, ale jest zatrzymywany, ale z jakiegoś powodu.

html css

-1

Zak Islam 20 grudzień 2019, 00:39

Spróbuj dodać z-index do obrazu

–

Maciek Rek

20 grudzień 2019, 00:45

1

„Format” nie jest wystarczająco wyrazistym słowem, aby zrozumieć, co próbujesz zrobić. Nie pomaga to, że obrazy są zepsute. Użyj usługi takiej jak dummyimage.com, aby umieścić fałszywe obrazy w odpowiednim rozmiarze.

–

Heretic Monkey

20 grudzień 2019, 00:47

Div id="l_s_ad", czy to literówka?

–

nocturns2

20 grudzień 2019, 01:05

Answer 1

Podaj więcej informacji, jak chcesz formatować swoje obrazy. Nie polecałbym nadrzędnego elementu div o pozycji bezwzględnej lub szerokości 12,5%, jeśli chcesz wyświetlać duży obraz. Również szerokość i wysokość obrazu nie powinny przekraczać 100%. Pobaw się z tymi wartościami w poniższym fragmencie. Mam nadzieję, że to pomoże.

#r_s_ad{
        width: 100%;
        height: 40%;

        background:#FFF;

        /*position: absolute;*/
        top:20%;
        right:0.2%;

        margin:0%;
        padding:0%;
    }
    #r_s_ad img{
        width:100%;
        height:100%;

        margin:0%;
        padding:0%;
    }

<div id=r_s_ad>
    <div id="l_s_ad">
        <img src="https://source.unsplash.com/random" alt="Birds of Prey film poster">
        <img src="https://source.unsplash.com/random" alt="It chapter 2 film poster">
    </div>
</div>

-1

hydra 20 grudzień 2019, 00:47

Answer 2

Kiedy mówisz o formacie, myślę, że masz na myśli skalowanie obrazów w celu dopasowania do przestrzeni docelowej.

Zmieniłem id = l_s_ad na class = l_s_ad w zagnieżdżonym div. Zdefiniowałem tę klasę w css.

Następnie zastosowałem tę klasę również do tagów graficznych. * (Z jakiegoś powodu nie zadziałałoby, gdybym pominął klasę w kontenerze nadrzędnym lub w którymkolwiek z tagów img. Nie wiem dlaczego.)

[css]

.l_s_ad {
  width: 100%;
  min-height: 40%;
}

[html]

<div id="r_s_ad">
  <div class="l_s_ad">
    <img class="l_s_ad" src="a.jpg" alt="">
    <img class="l_s_ad" src="b.jpg" alt="">
  </div>
</div>

0

nocturns2 20 grudzień 2019, 02:54

O to właśnie mam na myśli, chciałbym, żeby obraz pasował do identyfikatora

–

Zak Islam

20 grudzień 2019, 12:53

Jak sformatować obraz za pomocą HTML i CSS

2 odpowiedzi

Podobne pytania

Nowe pytania

html