在响应式div内适合图像

我是自举的新手，所以我不完全知道它是如何工作的！
我想要做的是使3个图像显示在相同大小的屏幕截图中。
他们的决议是不同的。
这是每个图片的HTML在响应式div内适合图像

<div class="col-sm-2 "> 
 

 
\t \t \t \t <div> <img src="img/test.jpg"> </div> 
 

 
\t \t \t \t <div > <h3>Text Here</h3> </div> 
 
\t \t \t \t 
 
\t \t \t </div>

这是截屏

来源

2017-02-15 Nitish ML

添加class="img-responsive"到您的IMG和同尺寸的显示器，你可以添加一些客户类，如my_img，并在那里设置大小：

my_img{ 
height: 200px 
width: 150px 
}

或将默认高度设置为父级。比你可以做宽度：100％;身高：100％

所以你知道的是一列。这设定了宽度。比你有一个没有课程的div。您可以将样式添加到该div或直接添加到img。

来源

2017-02-15 19:39:24

如果我指定尺寸，我会将div仍然响应？因为现在如果我将浏览器的大小调整为手机屏幕大小，图像会垂直堆叠并且其高度不会“看起来”不同，但是当我在桌面上打开时，它会变得明显不同！宽度是一样的！只有高度不匹配！ Ty提前！ –

该列在默认情况下为响应，因此只需给img一个width: 100%;（它将缩放到父元素），并且该div也将缩放到其父元素，即col-sm-2。

来源

2017-02-15 20:07:08 Dotol

我已将图像宽度设置为100％，宽度不成问题，但这些图像的高度不匹配！我试过高度= 100％，但它不会改变！谢谢！ –

如果我理解正确（你应该添加你的代码与堆栈片段），你可以，而不是增加'宽度：100％;'你可以做'高度：100％;'图像使用溢出-x：隐藏的;'这样（如果你的图像尺寸不一样），所有图像的高度相同，如果宽度大于另一个，则父元素将隐藏x轴上的溢出。 – Dotol

在响应式div内适合图像

回答

相关问题