Wie ändere ich die Größe eines HTML-Containers dynamisch?

Question

Ich habe ein Container-Div, das einen Hintergrund darstellt, dessen Größe sich dynamisch mit dem Fenster ändert. In diesem Container habe ich ein Bild-Div und möchte seine Größe mithilfe des Hintergrundcontainers ändern. Selbst wenn ich prozentuale Höhe und Breite verwende, kann ich die Größe scheinbar nicht dynamisch ändern. Kann mich jemand in die richtige Richtung führen?

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
* {
  box-sizing: border-box;
}

body {
  background-color: #af39fe;
  background-image: linear-gradient(147deg, #af39fe 0%, #4c38fd 74%);
  min-height: 100vh;
  font-family: "Fira Sans", sans-serif;
  display: flex;
}

.info-container {
  width: 95%;
  position: relative;
  max-width: 800px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 10px;
  height: auto;
}

.info-container__img {
  width: 400px;
  flex-shrink: 0;
  height: 400px;
  background-image: linear-gradient(147deg, #af39fe 0%, #4c38fd 74%);
  box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
  border-radius: 10px;
  transform: translateX(-80px);
  overflow: hidden;
}

.info-container__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 100;
  border-radius: 10px;
}

.info-container__content {
  padding-right: 25px;
}

.info-container__content>* {
  opacity: 100;
}

.info-container__title {
  font-size: 24px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}

.info-container__text {
  color: #4e4a67;
  margin-bottom: 30px;
  line-height: 1.5em;
}

.info-container__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, #5b0a6b 0%, #16034b 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 14px 80px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
}

<div class="info-container">
  <div class="info-container__img">
    <img src="https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg">
  </div>
  <div class="info-container__content">
    <div class="info-container__title">About Me</div>
    <div class="info-container__text">This is fake info about a persons life.</div>
    <a href="About.html" class="info-container__button">READ MORE</a>
  </div>
</div>

Answer 1

您可以使用像素设置.info-container__img的宽度。将其更改为百分比，它就会如您所愿。我设置了 max-width: 400px 并根据容器的样式更改了 width: 50%。

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
* {
  box-sizing: border-box;
}

body {
  background-color: #af39fe;
  background-image: linear-gradient(147deg, #af39fe 0%, #4c38fd 74%);
  min-height: 100vh;
  font-family: "Fira Sans", sans-serif;
  display: flex;
}

.info-container {
  width: 95%;
  position: relative;
  max-width: 800px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 10px;
  height: auto;
}

.info-container__img {
  width: 50%;
  max-width: 400px;
  flex-shrink: 0;
  height: auto;
  background-image: linear-gradient(147deg, #af39fe 0%, #4c38fd 74%);
  box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
  border-radius: 10px;
  transform: translateX(-80px);
  overflow: hidden;
}

.info-container__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 100;
  border-radius: 10px;
}

.info-container__content {
  padding-right: 25px;
}

.info-container__content>* {
  opacity: 100;
}

.info-container__title {
  font-size: 24px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}

.info-container__text {
  color: #4e4a67;
  margin-bottom: 30px;
  line-height: 1.5em;
}

.info-container__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, #5b0a6b 0%, #16034b 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 14px 80px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
}

  

    
  
  

    
About Me
    
This is fake info about a persons life.
    READ MORE