html - 2 列文本和图像填充问题

Question

我正在创建一个有趣的网站设计，我遇到了包含图像和文本的 2 列的恼人问题。它们被设置为 50% 宽度并且一切都是响应式的，但问题是文本列看起来很糟糕，因为它没有任何填充。

在文本列添加填充后，图像列有一些奇怪的间距。向两列添加填充对我来说不起作用，因为我希望图像占据整个容器的大小。

我希望图像是全高的，容器中没有填充，我希望文本有填充，这样看起来更好。但在这样做之后，图像下方就会出现灰色空间，如第一张图片所示。文本垂直和水平居中会很好

* {
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

.slidershow {
  overflow: hidden;
  background: #f1f1f1;
  margin-bottom: 15%;
}

.leftcolumn_slider {
  width: 50%;
  float: left;
  padding: 10%;
}

.rightcolumn_slider {
  width: 50%;
  float: right;
}

.slidershow img {
  width: 100%;
  height: auto;
  border-top-left-radius: 50px 50%;
  border-bottom-left-radius: 30px 50%;
}

<div class="slidershow">
  <div class="leftcolumn_slider">
    <h1>INTERNETAS NAMAMS</h1>
    <p>Telia profesionalų komanda, prižiūrinti ryšio kokybę ir 24 val. pasiruošusi išspręsti bet kurią jums kilusią problemą, – geriausia interneto garantija.
    </p>
    <p>Išbandykite net 30 d. nemokamai ir įsitikinkite</p>
    <button>Plačiau</button>
  </div>
  <div class="rightcolumn_slider">
    <img class="mySlides" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968">
    <img class="mySlides" src="https://secure.i.telegraph.co.uk/multimedia/archive/03013/selfie02_3013424b.jpg">
    <img class="mySlides" src="https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2017/12/06/Pictures/monkey-selfie_e5db3572-da5a-11e7-ad52-47d546f3ccd3.jpg">
  </div>
</div>

我希望文本列有填充和图像完全拉伸(stretch)到它的容器，但图像质量应该保持不变

Answer 1

编辑:

添加媒体查询以解决问题

在 leftcolumn_slider 类中创建一个 div，并为该 div 提供合适的填充值。

Issues - If the image is full width and text is larger

.solution {
  padding: 10%;
}

* {
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

.slidershow {
  display: flex;
  background: #f1f1f1;
  margin-bottom: 15%;
}

.leftcolumn_slider h1,
.leftcolumn_slider p {
  font-size: 100%;
}

.leftcolumn_slider {
  width: 50%;
}

.rightcolumn_slider {
  width: 50%;
}

.slidershow img {
  width: 100%;
  height: auto;
  border-top-left-radius: 50px 50%;
  border-bottom-left-radius: 30px 50%;
}

@media only screen and (max-width: 768px) {
  .slidershow {
    flex-direction: column-reverse;
  }
  .leftcolumn_slider,
  .rightcolumn_slider {
    width: 100%;
  }
  .slidershow img {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px;
  }
}

<div class="slidershow">
  <div class="leftcolumn_slider">
    <div class="solution">
      <h1>INTERNETAS NAMAMS</h1>
      <p>Telia profesionalų komanda, prižiūrinti ryšio kokybę ir 24 val. pasiruošusi išspręsti bet kurią jums kilusią problemą, – geriausia interneto garantija.
      </p>
      <p>Išbandykite net 30 d. nemokamai ir įsitikinkite</p>
      <button>Plačiau</button>
    </div>
  </div>
  <div class="rightcolumn_slider">
    <img class="mySlides" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968">
    <!--         <img class="mySlides" src="https://secure.i.telegraph.co.uk/multimedia/archive/03013/selfie02_3013424b.jpg" >
        <img class="mySlides" src="https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2017/12/06/Pictures/monkey-selfie_e5db3572-da5a-11e7-ad52-47d546f3ccd3.jpg" > -->
  </div>
</div>