制作响应式个人资料图片

Question

所以我正在构建一个nav 菜单，打开时会显示您的菜单以及您的姓名、电子邮件和个人资料图片。我面临的问题是，当用户上传他们的个人资料图片时（通常在宽度和高度）并使用边框半径，我得到了不希望的结果。在桌面上看起来不错的东西在移动设备上看起来很糟糕。 见以下代码：

$menu = "<nav id='menu'>
                         <ul>
                                                        <li><table border='0' width='100%%'>
                                                        <tr>
                                                        <td rowspan='2' style='width:30%;height:100%;padding-bottom:5px;padding-left:5px;'><div style=\"display: inline-block;
  width: 100%;
  height: 150px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image:url('" .$mem_avatar."')\"></div></td>
                                                        <td style='70%; padding-left:5px;'><ul><li><h2>$mem_name $mem_surname</h2></li><li ><h4>$mem_email</h4></li></ul></td>

                                                        </tr>
                                                        </table>

我想修复它，以便当有人上传他们的图片时，它可以在桌面和移动平台上正常显示。以上内容在桌面上的图片上可以正常工作，但在移动设备上会被严重压缩。我试过使用width: 10vwheight:10vw，这在台式机上看起来也不错，但在移动设备上却很小。当值更高时，结果将是相反的，在移动设备上看起来不错的东西在桌面上看起来很糟糕

Answer 1

使用 Bootstrap，而不是常见的 CSS。 它将根据您的要求为您提供现成的课程。 在 Bootstrap 中，响应式图像会自动调整以适应屏幕大小。

通过将.img-responsive 类添加到<img> 标记来创建响应式图像。然后图像将很好地缩放到父元素。

.img-responsive 类将display: block; 和max-width: 100%; 和height: auto; 应用于图像：

<img class="img-responsive" src="img_chania.jpg" alt="Chania"> 

希望对你有所帮助。