MST
星途 面试题库

面试题：CSS width和height与响应式布局的结合应用

在响应式网页设计中，需要根据不同的屏幕尺寸调整元素的width和height。请描述如何使用媒体查询（media queries）结合width和height属性来实现一个简单的响应式布局，其中包含一个在大屏幕上宽度为800px，在小屏幕上宽度为100%的图片展示区域，同时说明height属性应如何合理设置以确保图片在不同屏幕上的显示效果良好。
21.6万 热度难度
前端开发CSS

知识考点

AI 面试

面试题答案

一键面试
  1. HTML 部分：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Image</title>
</head>
<body>
    <div class="image-container">
        <img src="your-image.jpg" alt="Responsive Image">
    </div>
</body>
</html>
  1. CSS 部分：
/* 默认样式，小屏幕 */
.image-container {
    width: 100%;
    height: auto;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* 媒体查询，大屏幕 */
@media (min - width: 768px) {
   .image-container {
        width: 800px;
        height: auto;
        margin: 0 auto;
    }

   .image-container img {
        width: 100%;
        height: auto;
    }
}
  1. 关于 height 属性设置的说明：
    • 在上述代码中，将 height 属性设置为 auto。这样设置的原因是，当设置 width 属性根据屏幕尺寸变化时，height 设置为 auto 可以让图片按照其原始的宽高比进行缩放。例如，在小屏幕上，图片宽度变为 100%，高度会根据原始宽高比自动调整，保证图片不会变形。在大屏幕上，图片容器宽度设置为 800px，图片高度同样会根据原始宽高比自动调整，确保图片在不同屏幕上都能保持良好的显示效果，不会出现拉伸或压缩变形的情况。