Question

我已经挣扎了一段时间，但却无法让它发挥作用。

在每篇文章中＆＃39;在我的网页上，我左边有一个图像，右边有一个标题。

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

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

没有段落文本就可以工作，直到标题在窗口足够小时做同样的事情。

我希望图像高度始终是文章的高度，但是最小高度：100％对我来说不起作用。

我觉得在css布局方面我有一个根本的误解，但我无法弄明白。
任何帮助都将非常感激。

代码：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

当你的文字有3页时会发生什么？
当你的文字有3个单词时会发生什么？

你最接近你想要的是：

有两个并排的容器，宽度比任意（预定）（50％ - 50％？）;
让正确的人从填充它的文字中获得高度。
让左边的那个高度与右边的那个相同。
让图像成为左侧容器的裁剪背景，从顶部/底部或左/右裁剪，视情况而定。

＆＃13;

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

＆＃13;

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

＆＃13;

全屏显示并调整浏览器大小。

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

1 个答案: