Bagaimana untuk menukar saiz bekas HTML secara dinamik?

Question

Saya mempunyai div kontena yang merupakan latar belakang yang menukar saiz secara dinamik dengan tetingkap. Di dalam bekas itu saya mempunyai div imej dan saya mahu menukar saiznya menggunakan bekas latar belakang. Walaupun menggunakan peratusan ketinggian dan lebar, saya nampaknya tidak dapat mengubah saiznya secara dinamik. Bolehkah sesiapa membimbing saya ke arah yang betul?

@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

Anda boleh menggunakan tetapan piksel.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