javascript - 响应式设计：纵向/横向模式下的图像

Question

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

Answer 1

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

http://jsfiddle.net/LdeGJ/

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