响应式图像问题

这些是约束条件：图像必须始终保持其原始高宽比。如果父容器的宽度太小，则调整图像的大小以适应其内容。图像的最大高度为400像素。图像的最大宽度是父容器的宽度。问题：图像在受到父宽度限制时不能保持宽高比。这里是CSS我：响应式图像问题

img.myImage { 
    width:auto; 
    height:auto; 
    max-width:100%; 
    max-height:400px; 
}

编辑：要增加难度，这是父组件：

div.programContainer { 
    width: 100%; 
    max-width: 1300px; 
    padding: 10px; 
    text-align: left; 
    display: inline-flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

编辑：解决方法： 对不起，这没有什么可如何处理图像本身，删除父容器中不必要的弹性框可以解决问题。

来源

2016-08-30 Daniel Williams

我使用宽度：100％所有的时间。你试过这个吗？ –

100％宽度将图像水平延伸并调整纵横比。 –

正如@EdangJeorlie所说，在浏览器调整大小时，您需要width: 100%来调整图像的大小。一个例子是JSBin上的here。

就像是单挑，我相信你可以摆脱height: auto，因为这将是默认设置。希望这可以帮助！

来源

2016-08-30 02:18:33

我需要这样做，而不用指定像素的最大宽度。原始图像的宽度可能因图像而异。宽度需要自动计算。 –

@DanielWilliams：我认为你现在排序了吗？ –

是的，我已经解决了我自己的问题。我原来的图像代码是正确的。 –

您可以使用CSS这样的：

.img-responsive{ 
 
    display: block; 
 
    height: auto; 
 
    max-width: 100%; 
 
}

<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" alt="Rafique">

来源

2017-07-31 09:54:12

响应式图像问题

回答

相关问题