Question

我正在为摄影师创建一个简单的投资组合网页。他想在网上展示他的照片。所以图像应该是响应的。所以我将以下代码写入图像类：

img {
    max-width: 75%;
    height: auto;
}

因此它适合任何屏幕宽度的图像，但我想以全高显示图像。因此，如果图像具有更大的高度，则用户必须向下滚动以查看整个图像。那么我应该如何设置高度，以便立即显示整个图像？

关于，

的Andrej

Answer 1

你是否试过倒车一样，试着给它一个高度，并将宽度留给自动.. !!!

因为你只需要设置两者中的任何一个，而另一个相应地调整......

Answer 2

简单：

grunt.registerTask('serve', 'Compile and start a connect web server', function(target) {
    appConfig.programWildcard = target;

    return grunt.task.run([
        'replace:version',
        'clean:server',
        'concurrent:server',
        'underscore_jst',
        'replace:cmdWrap',
        'connect:livereload',
        'watch'
    ]);
});

但请注意the docs所说的内容：

grunt serve:mobile_a是根据包含块的高度计算的。如果未明确指定包含块的高度，则将百分比值视为无。

Answer 3

好的，我找到了解决方案。我只是用vh单位（视口高度）设置最大高度。谢谢你的帮助。

Answer 4

尝试这种方式：img{max-width:100%; max-height:100%;}

响应图像（宽度和高度）

4 个答案: