html - 制作响应式个人资料图片

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: 10vw height:10vw 这在桌面上看起来也不错，但在移动设备上看起来很小。将值调高时，结果会相反，在移动设备上看起来不错的东西在桌面上看起来很糟糕

Answer 1

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

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

.img-responsive类适用 display: block;和 max-width: 100%;和 height: auto;到图像:

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

希望对你有帮助。