img在手机屏幕上显示半切但在电脑屏幕上确定，css jQuery？

Question

移动屏幕上发生了奇怪的事情。在电脑屏幕上没问题。当用户点击img时，它会删除img，然后点击另一个按钮，它会显示img。看到img，当它显示时，它就像第一个，半切，当我移除时，它就像第二个，选择仍在那里。我怎么能用css解决这个问题？我的代码如下。感谢。如果我删除位置：固定为img下面的文本，那就没问题，但我需要修复它。

＆＃13;

＆＃13;

$('#avatar-suggestions-selector').click(function(){
               		$('.avatar').fadeIn();
					$('#img_text').fadeIn();
			});

$('#avatar-suggestions-selector_s').click(function(){
                $('.avatar').fadeOut();
					$('#img_text').fadeOut();
			});

＆＃13;

 img.avatar{
   	display:none;
	position:fixed ;
    top: 61px ;
    left: 12px ;
	width:140px;
	
}
#img_text{
	display:none;
	position: fixed;
	left: 25px;
	background: none repeat scroll 0% 0% #6d9bff;
	top: 218px;
	color: white;
	padding: 8px;
	border-radius: 9px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

CSS：

    @media screen and (max-width: 768px){
       img.avatar{
          width: 100%;
       }
    }

    @media screen and (max-width: 420px){
       img.avatar{
          width: 100%;
       }
    }

我希望这会有所帮助。把它放在你的CSS中。对于平板电脑，您可以使用768视口，对于手机，您可以使用420视口。