캔트 이미지의 크기를 변경하십시오

나는 당신이 모바일에서 그것을 볼 때 라인이 메뉴보다 더 나가기 때문에 나는 6을 변경하고 싶은 약간의 메뉴 버튼 아래에 한 줄을 가지고 있습니다. 이 시점에서 나는 모든캔트 이미지의 크기를 변경하십시오

HTML 코드

<div class="container"> 
<div class="row"> 
<div class = "col-sm-12 col-xs-12" style= "background-color:white"> 
<!--<img src ="/frontimages/orange_tab_wide_up.jpg" style= "display:inline-block"> 
<img style="margin-left:-4px; display:inline-block" src ="/frontimages/blue_tab_wide.jpg"> 
<img style="margin-left:-4px; display:inline-block" src ="/frontimages/green_tab_wide.jpg"> 
<img style="margin-left:-4px; display:inline-block" src ="/frontimages/yellow_tab_wide.jpg">--> 



<a class="btn-test btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a><a class="btn-test2 btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a><a class="btn-test3 btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a><a class="btn-test4 btn" type="button" id="search" value="" onclick="check()" href="#" role="button">Search</a> 

</div> 
</div> 
<div class="row"> 
<div class ="col-xs-7 "> 
<!-- <img class="img-responsive" src="/frontimages/orange_line_wide.png">--> 
<div class="g"> </div> 

</div> 
</div> 
</div>

CSS

.g { 
    height:3px; 
    margin-top:-3px; 
    background:-moz-linear-gradient(left, #FFFFFF 0%,#28ACEE 50%,#FFFFFF 100%); 
    background:-webkit-linear-gradient(left, #FFFFFF 0%,#28ACEE 50%,#FFFFFF 100%); 
    background:linear-gradient(left, #FFFFFF 0%,#EC9B3F 50%,#FFFFFF 100%); 
    width:100%; 
    display:block; 

    } 

    @media (min-width: 300px) and (max-width: 350px) { 
    .g {width:1px;} 
    } 

    @media (max-width:700px) { 
    .g{width: 405px} 
    }

출처

2014-05-24 user3638530

일부 스냅 샷 또는 Fiddle을 제공 할 수 있습니까? –

http://jsfiddle.net/3Vxxb/ 메뉴 아래에 파란색 그라데이션 선이 있어야하는데 이유가 무엇인지 알 수 없습니다. 선이 메뉴를 지나가고 이동식 가로보기 및 세로보기에서 올바르게 작동하도록 해당 문제를 해결하려고합니다. – user3638530

왜 width:1px을 설정해야합니까에 따라 변경 나던 x 1 픽셀 수있는 크기를 설정 한 경우에도? width:100%하지 않아야합니까?

아직까지 width:100% 범위를 벗어난 경우 width: 99%을 시도해 보겠습니다.

수정 : width:100%에서 max-width:100%으로 변경하십시오!

출처

2014-05-24 04:14:50 NoobTW

또는 http://caniuse.com/css3-boxsizing으로 시도해보십시오. – Mario

크기가 바뀌는 지 알기 위해 크기를 가지고 놀고 있었는데 방금 다시 변경하는 것을 잊었습니다. – user3638530

너비를 100 %로 설정하려고했지만 아직 작업을하지 못했습니다. 선이 여전히 메뉴 표시 줄보다 길습니다. 어떤 크기의 너비로 조정해도 전혀 변하지 않습니다. – user3638530

캔트 이미지의 크기를 변경하십시오

답변

관련 문제