响应式设计：纵向/横向模式下的图像答案

【问题标题】：Responsive Design: Images in portrait / landscape mode响应式设计：纵向/横向模式下的图像
【发布时间】：2013-11-21 04:11:34
【问题描述】：

所以我正在使我的主题对手机用户友好，但我真的想对图像做一些特别的事情。如果图像是横向的，我希望宽度比图像是纵向的要小......我的意思是可以通过“@media-screen max-width/max-height”来做到这一点css ...我在正确的轨道上吗？还是我必须在那里扔一个JS？

【问题讨论】：

如果您隔离了问题，发布代码和现场演示可能会有所帮助，否则此问题无用。
你可以设置图片的最大宽度，是的。还是您的意思是提供经过优化的图片而不是全尺寸图片？
请让您的主题的标题是问题/问题的摘要，而不是半句话（您甚至没有在帖子中提到）。
@KaiQing 我的意思是...如果我的内容 div 中的图像是纵向的，我希望图像的宽度小于横向的图像，你知道我要去哪里? :P
是的，只要您实际设置了相关图像的 css 属性，标准媒体查询就可以工作。你试过这个吗？几乎所有通过基本“css 媒体查询”谷歌搜索找到的示例都会给出一个不错的示例

【解决方案1】：

这应该是您正在寻找的。它使用百分比宽度和自动高度来确保所有照片具有相同的宽度，但高度会调整以确保图像不会失真。 css中的电话标签只是为了模拟一个电话屏幕。希望对你有帮助：D

img{
width:90%;
height:auto;
}

【讨论】：