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。它将根据您的要求为您提供现成的课程。在Bootstrap中，响应式图像会自动调整以适应屏幕大小。

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

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

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

希望它对你有所帮助。

制作自适应的个人资料照片

1 个答案: