HTML 段落文本导致图像在重新调整窗口大小时缩放

Question

我已经为此苦苦挣扎了一段时间，就是无法让它发挥作用。

在我网页上的每篇“文章”中，左侧有一个图像，右侧有一个段落标题。

如果我有段落文本，当我缩小窗口大小时图像将无法正确缩放:http://imgur.com/0ZDQCm5

当窗口全尺寸显示时它看起来是正确的。

在没有段落文本的情况下它仍然有效，直到窗口足够小后标题执行相同的操作。

我希望图像高度始终是文章的高度，但 min-height: 100% 对我不起作用。

我觉得我对 css 布局有一个根本性的误解，但我想不通。
任何帮助将不胜感激。

代码:

body article{
    float: left;
    width: 74%;
    border-right: 5px solid #e05a00;
    border-left:  5px solid #e05a00;
    border-top: 5px solid #0056e0;
    border-bottom: 5px solid #0056e0;
    background-color: #333;
    color: whitesmoke;
    margin-top: 10px;
}

body article img{
    float: left;
    border-right: 2px solid #e05a00;
    border-left:  2px solid #e05a00;
    max-height: 100%;
    min-height: 100%;
    min-width: 39.5%;
    max-width: 39.5%;
    object-fit: fill;
        
}



body article h2{
    font-family: arial-black;
    padding-left: 1%;
    border-bottom-right-radius: 40px;
    border-bottom: 5px solid #e05a00;
}

body article p{
    padding-right: 1%;
    padding-left: 1%;
    overflow: hidden;
}

 <article>
        <img src="images/McLaren_570S_Spider.jpg" alt="McLaren 570S Spider" />
        <h2>McLarens new 570S Spider is 'most attainable' supercar</h2>
       
        <p>Everyone loves a good supercar: gorgeous, aerodynamic, laughably out of reach for almost everyone on the planet. We love to drool over photos of these cars, fully aware that we’ll probably never drive one. McLaren wants to change that perception with the release of the 2018 570S Spider, calling it the “most attainable” sports car ever.</p>
        
        <p>This model is the third body type in McLaren’s Sport series portfolio, which includes the 570S Coupe and the 570GT. (We last saw the 570S Coupe at the 2015 New York Auto Show, and were appropriately bowled over by it.) The 570S Spider will make its global debut at the Goodwood Festival of Speed, which will be held in the UK June 29th–July 2nd.... read more <a href="https://www.theverge.com/2017/6/14/15794904/mclaren-570s-spider-attainable-supercar-price" >on the Verge.com</a>
       
    </article>

Answer 1

你想要的在技术上是不可能的。要理解为什么，不要考虑当您的文本有 10 或 15 行时会发生什么，更进一步:

• 当您的文本有 3 页时会发生什么情况？
• 当您的文本包含 3 个词时会发生什么情况？

你最接近你想要的是:

1. 有两个并排的容器，具有任意(预先确定的)宽度比(50% - 50%？)；
2. 让右边的高度从填充它的文本中获取。
3. 让左边的和右边的高度一样。
4. 让图像成为左侧容器的裁剪背景，根据情况从上/下或左/右裁剪。

.the-layout {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
}
.the-layout * {
  flex: 0 0 50%;
  box-sizing: border-box;
}
.the-image {
  background: transparent url('https://unsplash.it/800/800') no-repeat 50% 50% /cover;
}
.the-text {
  border: 1px solid #ccc;
  padding: 0 1rem;
}
/* additionally, center it on screen when on desktop */

body {margin: 0;}
.screen-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.the-image > img {
  display: none;
}

@media (max-width: 479px) {
  .the-image > img {
    display: block;
    max-width: 100%;
  }
  .the-layout {
    flex-direction: column;
  }
}

<div class="screen-center">
<div class="the-layout">
  <div class="the-image">
    <img src="https://unsplash.it/800/800" />
  </div>
  <div class="the-text">
  <p>Warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats the dog smells bad and all of a sudden cat goes crazy, but pose purrfectly to show my beauty but find a way to fit in tiny box, and cat snacks meow for food, then when human fills food dish, take a few bites of food and continue meowing. Hiss at vacuum cleaner milk the cow or sit on the laptop, warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats, so step on your keyboard while you're gaming and then turn in a circle always hungry white cat sleeps on a black shirt.
  </div>
</div>
</div>

进入全屏并调整浏览器大小。