브라우저에서 이미지 감싸기 (이동)를 방지합니다. 크기 조정

내 메인 페이지에서 브라우저 크기를 이동하거나 줄 바꿈하는 이미지가 있습니다. 브라우저가 작 으면 오른쪽에서 이미지가 잘릴 수 있도록 바꿀뿐입니다.브라우저에서 이미지 감싸기 (이동)를 방지합니다. 크기 조정

나는 아무 소용이 몇 가지 시도 :

은 DIV의 ID right 및 right-image
시도에서 상대적인 위치에 플로트를 제거 최소 폭 DIV ID에 대한 right
높이, 너비를 백분율로 표시

뷰포트 설정을 추가했습니다.

<body> 
    <div id = "main"> 
     <div id = "left"> 
      <div id="left-title">Tag Line</div> 
      <div id="left-blurb"> 
       Some blurb 
      </div> 
     <div id='left-signup'> SignUp! button</div> 
    </div> 

    <div id = "right"> 
     <div id = "right-image"></div>  <--- Image 
    </div> 

</body>

관련 CSS : 템플릿에서

는 이미지가 같은 main 외부에 배치되어

body { 
    margin: 0 auto; 
    height: auto; 
    overflow-x: hidden; 
} 
#main { 
    float: center; 
    width: 950px; 
    overflow: visible; 
    height: auto; 
    margin: 0 auto; 
} 
#left { 
    float: left; 
    width: 500px; 
    display: inline-block; 
} 
#left-title { 
    font-size: 3.4em; 
    margin: 25px 0px 20px 15px; 
} 
#left-blurb { 
    margin: 0px 20px 10px 15px; 
} 
#left-signup { 
    margin: 0px 0px 0px 90px; 
} 
#right { 
    float: right; 
    width: 600px; 
    height: 400px; 
    margin-top: -10px; 
    display: inline-block; 
} 
#right-image { 
    height: 100%; 
    width: 100%; 
    position: relative; 
    left: -50px; 
    top: 0px; 
    background: url(my_photo.jpg) no-repeat; 
    -moz-background-size: cover; 
    background-size: cover; 
    z-index: 0; 
}

나는 그 질문에 관련되는 CSS를 생각합니다. 하지만 충분하지 않다면 내가 말하는 웹 사이트는 https://www.mathnuggets.com

통찰력을 얻었습니다.

출처

2013-04-02 zaphod

문서 크기가 특정 픽셀 수보다 작 으면 미디어 쿼리를 추가하여 문서에서 제거 할 수 있습니다.

@media screen and (max-width:480px) { 
    #right-image{ 
     display: none; 
    } 
}

그렇지 않으면 동일한 방법으로 완료 한 것처럼 위치를 조정할 수 있습니다. 창의 크기에 따라 위치를 조정하면됩니다. 귀하의 코드에서 볼 수있는 문제는 다른 요소와 겹치게하는 -10px 여백을 사용하기 때문에 특정 뷰포트 크기에 대해 간단히 변경할 수 있다는 것입니다.

또한 픽셀을 사용하여 크기 조정 방법을 변경하는 대신 비율을 사용하여 뷰포트 변경시 이미지가 약간 구부러 지도록 할 수 있습니다.

이 사이트는 내가 필요에 따라 더 반응 할 수 있도록 기존의 디자인 작업을하는 데 도움이 될 수 있다고 생각 훌륭한 자원을 많이 가지고 : 당신이 ID를

position: absolute;

를 사용하는 경우 http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

출처

2013-04-02 20:26:01 fskirschbaum

정보를 공유해 주셔서 감사합니다. – zaphod

질문의 정신을 정말로 이해하지 못했다면 미안합니다. – fskirschbaum

= 오른쪽 div 왼쪽 div 아래 결코 가지 않을거야

출처

2013-04-02 20:30:51 Mat

나는 이것이 처음에는 효과가 있다고 생각했지만, 이것은 다른 브라우저에서 레이아웃을 엉망으로 만듭니다. 그리고 여백을 지정해도 문제가 해결되지 않습니다. – zaphod

코드를 표시 할 수 있습니까? – Mat

질문에 붙여 넣은 CSS는 관련 코드 부분입니다. 다른 CSS가 도움이 될만한 것은 무엇입니까? 나는 그것을 게시 할 수있다. 가능하다면 https://www.mathnuggets.com에서 확인할 수도 있습니다. – zaphod

브라우저에서 이미지 감싸기 (이동)를 방지합니다. 크기 조정

답변

관련 문제