元内容设备宽度影响图像，使列内的图像不清晰

如何解决元内容设备宽度影响图像，使列内的图像不清晰

在我的网站上添加此行以使导航栏响应后，该列内的图像在手机屏幕上无法清除。检查两张图片以了解我的意思！

当我从中继中删除名称为“ viewport”的照片时，照片看起来很清晰。

我该如何解决？我需要使照片清晰，并需要添加此名称=“ viewport”，这样我的网站才能响应！

这是我的代码

<meta  content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>


.topnav {
  overflow: hidden;
  margin-top: 40px;
}

.topnav a {
  float: left;
  display: block;
  color: #555555;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  padding: 8px 15px;
    text-transform: uppercase;
}

.topnav a:hover {
  background-color: #fcfdfc;
}

.topnav a.active {
  color: #00405d;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .logo img {
    width: 100px;
}

}
</style>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-54517731358aab10" async="async"></script>
  <div class="header-top">
    <div class="wrap"> 
      <p><%= image_tag "2.png" %> FREE SHIPPING on orders over CAD $150</p>
      <div class="clear"></div>
    </div>
  </div>
  <div class="topnav" id="myTopnav">
  <div class="header-bottom">
    <div class="wrap">
    <div class="header-bottom-left">
      <div class="logo">
        <%= link_to root_path do %><%= image_tag "twinkledreamslogo.png" %><% end %>
      </div>
      
      
  <%= link_to "Home",root_path,class: "active" %>
  <%= link_to "Shop",teethers_path %>
  <%= link_to "Baby",baby_path %>
  <%= link_to "reviews",reviews_path %>      
  <%= link_to "Contact",new_contact_path,class: "color7"%>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
 
    
     <div class="header-bottom-right">
         <div class="search"> 
         <%= form_for "",url: teethers_path,role: "search",method: :get,class: "textbox" do %>
         <%= text_field_tag :search,@search_term,value: "Search",onfocus: "this.value = '';",onblur: "if (this.value == '') {this.value = 'Search';}" %>
              <input type="submit" value="Subscribe" id="submit" name="submit">
        <% end %>  
        
   
        <div id="response"> </div>
     </div>
   </div>
    </div>
     <div class="clear"></div>
     </div>
  </div>  </div>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
  </ol>

    <!-- Wrapper for slides -->
  <div class="carousel-inner fwslider">

    <div class="item active">
      <div class="row">
        <div class="col-md-6 col-sm-3 col-xs-3 col-lg-3">
          <%= image_tag "mirabel.jpg",style: "height: 400px;"%>
        </div>
        <div class="col-md-6 col-sm-3 col-xs-3 col-lg-3">
          <%= image_tag "icecream.jpg",alt: "icecream baby custom teether",style: "height: 400px;"%>
          
        </div>
        <div class="col-md-6 col-sm-3 col-xs-3 col-lg-3">
          <%= image_tag "giancarlo1.jpg",style: "height: 400px;"%>
        </div>
        <div class="col-md-6 col-sm-3 col-xs-3 col-lg-3">
          <%= image_tag "elephant.png",alt: "elephant baby custom teether",style: "height: 400px;"%>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="row">
        <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
          <%= image_tag "robbie.jpg",style: "height: 400px;"%>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
          <%= image_tag "elephant2.jpg",style: "height: 400px;"%>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
          <%= image_tag "isa.jpg",style: "height: 400px;"%>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3">
          <%= image_tag "oreo.jpg",alt: "oreo baby custom teether",style: "height: 400px;"%>
        </div>
      </div>
    </div>
</div>