Html 如何使我的图像在手机上更清晰

我在布局中使用了bootstrap，但是当您在移动设备上查看此页面时，覆盖的文本似乎隐藏了大部分图像，我尝试了一些不同的方法，例如媒体查询

我还为网站添加了一些媒体查询，这有助于文本保留在框中，但仍然覆盖了大部分图像

/*联系页面*/ .某处{ 利润上限：50px！重要； } 身体{ 字体大小：16px； 字体系列：雷威； } img{ 最大宽度：100%； } h3{ 字号：18px； } .叠加文本{ 字体大小：16px； 宽度：50%； /*重要的*/ 底部：21vw； /*重要的*/ 填充：25px； 背景：F7F7； } /*响应的*/ @仅介质屏幕，最大宽度：768px{ /*移动电话：*/ [类别*=列-]{ 宽度：100%； } } /*移动电话：*/ [类别*=列-]{ 宽度：100%； } 联系斯蒂芬妮 如果您有任何问题或任何设计要求，请发送电子邮件至：

电子邮件 /*联系页面*/

.somesection {
  margin-top: 50px!important;
}

body {
  font-size: 16px;
  font-family: raleway;
}

img {
  max-width: 100%;
}

h3 {
  font-size: 18px;
}

---

试试这个可以解决你的问题

唯一的问题是文本现在没有覆盖图像？@Stephencatterall我不明白你还想要什么？请解释一下？抱歉@nour我想要一个文本覆盖在右边的灰色框中的图像，它可以在桌面上用我的代码正常工作。但是，当您在手机上查看网页时，手机会覆盖大部分图像，并且不确定如何移动图像或进行调整以更改此设置

<div class="page-content inset">

        <hr>




        <div class="container somesection">
          <div class="row">
          <div class="col-md-6 col-xs-8 col-sm-8">
            <img align="left" src="images/contact.jpg">
          </div>
          <div class="col-md-6 col-sm-3 col-xs-3">
            <h1>CONTACT STEPHANIE</h1>
            <br>
            <p>If you have any questions or any design requests please email me at:</p>


            <h3><i>EMAIL</i></h3>



          </div>

        </div>