Html 制作响应性的个人资料图片

因此，我正在构建一个

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>

$menu=”


$mem\u name$mem\u name
$mem\u email

---

我想修复它，这样当有人上传他们的图片时，它将在桌面和移动平台上正确显示。上面的内容在桌面上可以正常工作，但在移动设备上会被严重挤压。我尝试过使用

宽度：10vw

高度：10vw

，这在桌面上看起来也很好，但很容易被挤压移动商城。当提高价值时，结果是相反的，在移动设备上看起来不错的东西在桌面上看起来很糟糕

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

通过将

.img responsive

类添加到

---

希望对您有所帮助。

许多平台（查看Twitter、LinkedIn甚至StackOverflow）都会在个人资料图片中使用剪切，因此它们的比例都相同。@GolezTrol您可以指定剪切的含义吗？修剪边缘以形成统一的形状（通常是正方形，但任何其他比例也可以。你能告诉我如何做吗？我应该完全删除div吗？你需要在你的…中链接bootstrap min.css和min.js文件，然后在div中链接，即…所有链接都已经完成了。但是，目前我在css.s中将图像显示为背景图像是否需要更改此设置？尝试添加类

img responsive

，但图片无法在桌面和手机上显示。您可以使用背景大小：cover CSS属性。或者，如果您想在div中使用resize拉伸背景图像，请使用背景大小：100%100%

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