Pomoc z strona html

Question

Witam pisze poniewaz mam problem z strona html, nie mam pojecia co moge zrobic aby tekst nie najezdzal na zdjecie podczas minimalzowania strony, czy któs mógłby mi podpowiedzieć co z tym zrobic 

HTML

<div id="zdj2">
            <img src="files/2.webp " height="700px" width="600px" />
        </div>
        <div id="text2">
            <h1>The Ultralight Portable catamaran peak with heaps of user friendly solutions</h1>
            <p>The Ultralight-Portable catamaran - peak performer with heaps of user friendly solutions.
                EPOXY REVOLUTION - KART 388 Yes, this boat is the only one boat in her class to be integrally built with vacuum molded 100% epoxy/sandwich structure,
                carrying unsinkable sintered pvc core(zero moisture absorbtion), ...

CSS

#zdj2 {
    float:left;
    display: flex;
    margin-top: 50px;
    width: 35%;
    margin-left: 18%;
    
}

#text2 {
    display: block;
    margin-top: 40px;
    width: 25%;
    height: 550px;
    float: right;
    margin-right: 20%;
    font-size: large;
}

 

Answer 1

Nie nadawaj img na "sztywno" rozmiaru

<img src="files/2.webp " height="700px" width="600px" />

tylko np. procentowo i najlepiej to zapisać jest w css-ie

[ on-line ]

<div id="zdj2">
  <!-- <img src="files/2.webp" /> -->
  <img src="https://picsum.photos/600/700?random=1" /><!-- dla demonstracji -->
</div>
<div id="text2">
  <h1>The Ultralight Portable catamaran peak with heaps of user friendly solutions</h1>
  <p>
    The Ultralight-Portable catamaran - peak performer with heaps of user friendly solutions. EPOXY REVOLUTION - KART 388 Yes, this boat is the only one boat in her class to be integrally built with vacuum molded 100% epoxy/sandwich structure, carrying unsinkable sintered pvc core(zero moisture absorbtion), ...
  </p>
</div>

#zdj2 {
    float: left;
    display: flex;
    margin-top: 50px;
    width: 35%;
    margin-left: 18%;     
}
#zdj2 img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
} 
#text2 {
    display: block;
    margin-top: 40px;
    width: 25%;
    height: 550px;
    float: right;
    margin-right: 20%;
    font-size: large;
}

 

możesz też użyć flex (tak jak już go użyłeś w Twoim kodzie), ale stwórz tzw. pojemnik (container) dla #zdj2 i #text2 i jemu nadaj właściwość flex np.

[ on-line ]

<div class="container">
  <div id="zdj2">
    <!-- <img src="files/2.webp" /> -->
    <img src="https://picsum.photos/600/700?random=1" /><!-- dla demonstracji -->
  </div>
  <div id="text2">
    <h1>The Ultralight Portable catamaran peak with heaps of user friendly solutions</h1>
    <p>
      The Ultralight-Portable catamaran - peak performer with heaps of user friendly solutions. EPOXY REVOLUTION - KART 388 Yes, this boat is the only one boat in her class to be integrally built with vacuum molded 100% epoxy/sandwich structure, carrying unsinkable sintered pvc core(zero moisture absorbtion), ...
    </p>
  </div>
</div>

.container {
  width: 80vw;
  display: flex;
  gap: 1em;
  padding: 2em;
  margin: 1em auto;

  /* dla prezentacji*/
  border: 1px solid red;
}
#zdj2 {
  width: 40%;
}
#zdj2 img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
#text2 {
  width: 60%;
  font-size: large;
}

 

Comments

Dziękuje bardzo za odpowiedz rozwiązanie z containerem działa idealnie

---

@VBService, Mam jeszcze jedno pytanie czy jest prosty spośób aby teskt bądz zdjęcie przesuwało się nad bądz pod siebie podczas zmniejszania rozmiaru okienka strony?

Wiem że można tak zrobić za pomocą tabel jednak te wydają się mocno upierdliwe.