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>

我希望文本列具有填充，并且图像可以完全拉伸到容器中，但是图像质量应该保持不变

Answer 1

编辑：

添加媒体查询以解决问题

在类leftcolumn_slider内创建一个div，并为该div填充指定合适的填充值。

问题-如果图像为全角且文本较大

.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>

Answer 2

只需为图像类添加display:block即可删除空白，因为默认情况下img是一个内联元素。

要使左列居中，请为父类添加display:flex，并为左列添加align-self:center以对齐中心。

* {
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

.slidershow {
    overflow: hidden;
    background: #f1f1f1;
    margin-bottom: 15%;
    display: flex;
}

.leftcolumn_slider {
    width: 50%;
    float: left;
    padding: 10%;
    align-self:center;
}

.rightcolumn_slider {
    width: 50%;
    float: right;
}

.slidershow img {
    width: 100%;
    height: auto;
    border-top-left-radius: 50px 50%;
    border-bottom-left-radius: 30px 50%;
    display: block;
    height: 100%;
    object-fit: cover
}

<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">
    </div>
</div>

Answer 3

* {
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.slidershow {
  overflow: hidden;
  background: #f1f1f1;
  margin-bottom: 15%;
  display: flex;
}

.leftcolumn_slider {
  display: flex;
  flex-direction: column;
  padding: 1.5%
}
button{
  align-self: center;
}
p{
  align-self: center;
}

.rightcolumn_slider {
display: flex;
}
.mySlides{
  display:flex;
}

.mySlides img{
  width:100%;
  height: 100%;
}

.slidershow img {
  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">
  </div>
</div>

尝试一下。

2列文字和图片填充问题

3 个答案:

编辑：