我刚开始学习前端 Web 开发。我正在制作我的投资组合模型，但我遇到了图像尺寸问题。我正在使用引导框架。当我使用带有 img-responsive 类的图像时，我上传的图像的高度和宽度会自动设置。由于我想自己设置高度，所以我更改了图像的高度（在 css 文件中）。但是，现在当我减小浏览器的宽度以查看我的投资组合在移动视图中的外观时，宽度会调整大小但高度保持不变。这使图像看起来不成比例。我怎样才能解决这个问题？如果我不使用自定义高度，则在移动视图中一切正常。
【问题讨论】：
标签： html css twitter-bootstrap
这在我的 google chrome 浏览器中对我有用。就移动视图和其他设备而言，此元标记有助于 "meta name="viewport" content="width=device-width, initial-scale=1.0"（请参阅我的 html 头元素中的元标记）
hr {
border-style: solid;
border-width: 1px;
width: 100%;
}
.featured-work {
color: #BCBBBB;
}
.font {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-size: 60px;
}
.font1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
}
.footer-title-fonts {
color: #747704;
}
.name {
margin-top: 66px;
}
.ulogo {
margin-top: 40px;
}
.multiple-borders {
box-shadow: 0px 0px 0px 7px black;
}
.multiple-borders1 {
box-shadow: 0px 0px 0px 7px blue;
}
.multiple-borders2 {
box-shadow: 0px 0px 0px 7px red;
}
.multiple-borders3 {
box-shadow: 0px 0px 0px 7px green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container"> <!-- start of container class -->
<div class="row"> <!-- start of row class -->
<!-- udacity logo -->
<div class="col-md-6">
<img class="ulogo" src="images/logo.jpg" alt="udacity logo">
</div>
<!-- end of udacity logo -->
<!-- start of name div -->
<div class="col-md-6">
<h1 class="font name text-uppercase text-right">Jane Doette</h1>
<h5 class="font1 text-uppercase text-right">Front-end ninja</h5>
</div>
<!-- end of name div -->
</div> <!-- end of row class -->
<hr>
<!-- main image -->
<div class="row">
<div class="col-md-12">
<img class="img-responsive multiple-borders" src="http://placekitten.com/1170/500" alt="filler image">
</div>
</div>
<!-- end of main image -->
<!-- bottom 3 images -->
<div class="row"> <!-- start of row class -->
<div class="col-md-12">
<h3 class="featured-work">Featured Work</h3>
</div>
<!-- First Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders1" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Applify</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Appify/</h6>
</div>
<!-- End of frst Image -->
<!-- Second Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders2" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Sunflower</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Sunflower/</h6>
</div>
<!-- End of second Image -->
<!-- Third Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders3" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Bokeh</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Bokeh/</h6>
</div>
<!-- End of Third Image -->
<!-- end of bottom 3 images -->
</div> <!-- end of row class -->
</div> <!-- end of container class -->
</body>
</html>【讨论】：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap_css/bootstrap.min.css">
<link rel="stylesheet" href="Custom_css/P1.css" media="screen" title="no title" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<title>Project 1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="top-image" src="images/udacity.png" width="200px" class="img-responsive" alt="Responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="text-thin">Jiwanjot Singh</h1>
<h4>Front-end Ninja</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/mainimage.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/arcade.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">ArcadeDemo</h3>
<p>https://github.com/udacity/ArcadeDemo/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/alarm.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">AlarmMe</h3>
<p>https://github.com/udacity/AlarmMe/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/bokeh.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">Bokeh</h3>
<p>https://github.com/udacity/Bokeh/</p>
</div>
</div>
</body>
</html>
【讨论】：