响应式设计:纵向/横向模式下的图像

Responsive Design: Images in portrait / landscape mode

本文关键字：模式横向图像纵向响应更新时间：2023-09-26

所以我正在使我的主题对手机用户友好，但我真的很想对图像做一个特别的事情。如果图像是横向的，我希望宽度小于图像是纵向的宽度......我的意思是可以通过 css 中的"@media 屏幕最大宽度/最大高度"来做到这一点......我走在正确的轨道上吗？还是我必须在那里投入一个 JS？

这应该是你要找的。它使用百分比宽度和自动高度来确保所有照片具有相同的宽度，但高度会调整以确保图像不会失真。css 中的电话标签仅用于模拟手机屏幕。希望对:D有所帮助

http://jsfiddle.net/LdeGJ/

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