使用CSS调整图片大小

Posted 2023-01-21

我想把图像设置在 600px 为设计目的。但是，我想根据屏幕的大小来降低高度。如果我尝试 height: auto 这将覆盖 600px. 我把图像放在一个容器里，容器的名称是 800px.

我可以做什么？

答案

用户正确地注意到，你的问题是非常模糊的。如果我理解正确的话，你需要宽度为600像素的容器内的图片始终处于同一位置。

.image
    position: relative;
    height: 600px;


.image img 
        min-width: 100%;
        min-height: 100%;
        height: 100%; // or width depending on aspect ratio

        position: absolute;
        top: 50%;
        left: 50%;

        object-fit: cover;

        transform: translate(-50%, -50%);
    

另一答案

如果要通过缩小屏幕尺寸来调整图片大小，你应该使用width:100%，否则你可以制作一个div，然后用相同的图片在上面应用一个背景图片。

另一答案

如果你想让你的图片占据整个容器的高度，你必须将容器的高度设置为600px，然后将图片的高度设置为100%。至于根据屏幕大小调整大小，你必须使用媒体查询。