无法以某种方式解开 flex 容器内的图像？答案

【问题标题】：Can't unwarp images inside a flex container somehow?无法以某种方式解开 flex 容器内的图像？
【发布时间】：2020-12-23 15:06:56
【问题描述】：

我有一个带有多个其他弹性容器的弹性容器。在它们每个内部，都存在一个图像和一个<p>。 img（复选标记）在较低的屏幕上变形，我尝试了 height: auto; 和 max-width: 100%;，但一旦屏幕变得太短，复选标记就会变形，见此处：

.leistungen .headline {
        background: #129DE0;
        text-align: center;
        padding: 20px 40px;
        max-width: 300px;
        margin: 0 auto;   
        color: #fff;
    }
    
    .leistungen .headline h2 {
        margin-bottom: 0;
    }
    
    .leistungen .services {
        background: #129DE0;
        
    }
    
    .leistungen .services .servicesHolder {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1300px;
        margin: 0 auto;
    }
    
    .leistungen .services .service {
        display: flex;
        justify-content: space-between;
        margin: 20px;
        max-width: 500px;
    }
    
    .leistungen .services .service img {
        max-width: 100%;
        width: 3rem;
        height: auto;
        margin-right: 2rem;
    }

<div class="leistungen">
            <div class="headline">
                <h2>Das bieten wir:</h2>
            </div>
            <div class="services">
            <div class="servicesHolder">
                
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            </div>
            </div>
        </div>

我猜它与弹性容器有关，但我不知道..

【问题讨论】：

不明白您需要什么？你能详细说明一下这个问题吗？
@Manjuboyz 我需要一种方法来始终正确地显示图像，而不是像在屏幕上那样。高度应该与宽度相匹配，即使我给它一个“高度：自动；”。
你的意思是换行还是调整大小而不是变形？
@RamondeVries 哦.. 是的，我的意思是调整大小

标签： html css image flexbox responsive

【解决方案1】：

您可以为图像设置height: 100%; 和width: auto;。这样，它将变得与文本一样高，并且宽度将根据图像的比例进行调整（在您的情况下等于高度，因为它们是正方形）。此外，您可以将max-height 设置为不超过特定大小。这可以定义为一个像素值，但也可以使用vw 单位使其相对于屏幕宽度（可以选择使用一个或多个媒体查询）：

.leistungen .headline {
        background: #129DE0;
        text-align: center;
        padding: 20px 40px;
        max-width: 300px;
        margin: 0 auto;   
        color: #fff;
    }
    
    .leistungen .headline h2 {
        margin-bottom: 0;
    }
    
    .leistungen .services {
        background: #129DE0;
        
    }
    
    .leistungen .services .servicesHolder {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1300px;
        margin: 0 auto;
    }
    
    .leistungen .services .service {
        display: flex;
        justify-content: space-between;
        margin: 20px;
        max-width: 500px;
    }
    
    .leistungen .services .service img {
        height: 100%;
        max-height: 15vw;
        width: auto;
        margin-right: 2rem;
    }

<div class="leistungen">
            <div class="headline">
                <h2>Das bieten wir:</h2>
            </div>
            <div class="services">
            <div class="servicesHolder">
                
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="bilder/icons/check.png">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            </div>
            </div>
        </div>

【讨论】：

【解决方案2】：

也许您可以使用min-width 而不是max-width

【讨论】：

【解决方案3】：

我更改了一些 CSS，我认为这是预期的结果，图像保持可见并调整为正方形。这可以通过img 上的object-fit: contain; 来完成

.leistungen .headline {
        background: #129DE0;
        text-align: center;
        padding: 20px 40px;
        max-width: 300px;
        margin: 0 auto;   
        color: #fff;
    }
    
    .leistungen .headline h2 {
        margin-bottom: 0;
    }
    
    .leistungen .services {
        background: #129DE0;
        
    }
    
    .leistungen .services .servicesHolder {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1300px;
        margin: 0 auto;
    }
    
    .leistungen .services .service {
        display: flex;
        justify-content: space-between;
        margin: 20px;
        max-width: 500px;
        border: 1px solid black;
    }
    /* added styling for img */
    .leistungen .services .service img {
        max-width: 100%;
        width: 3rem;
        height: auto;
        margin-right: 2rem;
        position: relative;
        border: 1px solid black;
        object-fit: contain;
    }
    /* added styling for p */
    .leistungen .services .service p {
        margin: 0;
        padding: 0;
        max-width: 90%;
    }

<div class="leistungen">
            <div class="headline">
                <h2>Das bieten wir:</h2>
            </div>
            <div class="services">
            <div class="servicesHolder">
                
            <div class="service">
                <img src="https://via.placeholder.com/150">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="https://via.placeholder.com/150">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="https://via.placeholder.com/150">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="https://via.placeholder.com/150">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="https://via.placeholder.com/150">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            
            <div class="service">
                <img src="https://via.placeholder.com/150">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
            </div>
            </div>
            </div>
        </div>

【讨论】：

【解决方案4】：

您可以使用vh 和vw 自动调整图像：

fiddler 玩游戏。

.leistungen .headline {
  background: #129DE0;
  text-align: center;
  padding: 20px 40px;
  max-width: 300px;
  margin: 0 auto;
  color: #fff;
}

.leistungen .headline h2 {
  margin-bottom: 0;
}

.leistungen .services {
  background: #129DE0;
}

.leistungen .services .servicesHolder {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1300px;
  margin: 0 auto;
}

.leistungen .services .service {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  max-width: 500px;
}

.leistungen .services .service img {
  max-width: 100%;
  width: 20vw;
  height: 20vh;
  margin-right: 2rem;
}

<div class="leistungen">
        <div class="headline">
            <h2>Das bieten wir:</h2>
        </div>
        <div class="services">
        <div class="servicesHolder">
            
        <div class="service">
            <img src="http://placekitten.com/301/301">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
        </div>
        
        <div class="service">
            <img src="http://placekitten.com/301/301">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
        </div>
        
        <div class="service">
            <img src="http://placekitten.com/301/301">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
        </div>
        
        <div class="service">
            <img src="http://placekitten.com/301/301">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
        </div>
        
        <div class="service">
            <img src="http://placekitten.com/301/301">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
        </div>
        
        <div class="service">
            <img src="http://placekitten.com/301/301">
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
        </div>
        </div>
        </div>
    </div>

【讨论】：

图像在低屏幕上仍然不正确，我不能在 flex-images 上使用 height 属性吗？
你可以，但是如果你想根据屏幕分辨率设置图像vh和vw是最好的选择，上面只是一个例子，你可以选择你想要的任何尺寸。跨度>