Problem ze zdjęciem CSS, HTML.

Question

Witam! Próbowałem zrobić "pudełko" którego około 30% zajmuje zdjęcie, a pozostały obszar tekst, o ile tekst daje zadowalający (przynajmniej dla mnie) efekt, to mam problem z ustawieniem zdjęcia. Chciałbym żeby zajmował 30% szerokości i 100% wysokości tych 30%, i tu pojawia się problem, próbowałem już na kilka sposobów i niestety nadal nie potrafię tego zrobić w zależności of wielkości obrazka albo wystaje ,albo jest za mały ,albo jeszcze inne dziwne rzeczy. Mógłby mi ktoś pomóc/wskazać gdzie leży błąd? 

Przeczytałem kilka stron z css o komendach które użyłem i obejrzałem filmy w poszukiwaniu błędu, ale niestety mi się nie udało

 

Na wszelki wypadek dodałem prostą grafikę jak chciałbym, żeby to wyglądało. 

Kod HTML:

   <div class="textbox-type1">
      <div class="textbox-type1-img">
        <img src="img/1.jpg">
      </div>
      <div class="textbox-type1-text">
        <h2>lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Nullam malesuada et metus eget euismod. 
          Integer sed sem nec massa tempor accumsan a at arcu. 
          In sit amet mauris facilisis, pretium urna interdum, laoreet ligula. 
          Pellentesque iaculis risus a magna sodales rutrum.
          Praesent ipsum urna, aliquam id libero vel, gravida iaculis elit. 
          Sed dictum quam in sapien gravida, quis congue dolor elementum. 
          Etiam varius ut arcu vel euismod.
          Phasellus ut lorem ultricies ligula dapibus blandit eu vel ex.
          In congue enim mauris. Duis finibus, leo vitae aliquet scelerisque,
          erat lectus imperdiet libero, id mollis sapien lorem in lorem.
          Aenean est nisi, consequat ut porttitor vitae, mattis et nisi. 
          Vivamus semper luctus justo, vel porta nisl suscipit eu.</p>
      </div>
    </div>

Kod CSS:

.textbox-type1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 275px;
  padding: 0 20px 20px 0;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  display: flex;
}

.textbox-type1:hover {
  box-shadow:  0 15px 15px rgba(0, 0, 0, 0.5);
}

.textbox-type1 .textbox-type1-img {
  width: 30%;
  height: 275px;
}

.textbox-type1 .textbox-type1-img img {
  max-width:100%;
}

.textbox-type1 .textbox-type1-text {
  padding-left: 20px;
}

.textbox-type1 .textbox-type1-text h2 {
  margin: 0;
  padding-left: 0;
  color: #D33957;
  font-size: 50px;
}

.textbox-type1 .textbox-type1-text p {
  margin: 0;
  padding-left: 10px 0 0;
  text-align: justify;
}

 

Answer 1

Możesz użyć komendy, która ustawi obraz jako tło diva. Wtedy nie musisz wstawiać obrazku tylko diva podzielić na 2 części.

background: url('img/1.jpg');

Możesz to dostosować komendą:

background-size: 100%;