변경 위치

Question

나는 반응 웹 사이트를 설정하는 프로젝트에 참여 그리고 난 여기에 또는 다른 곳에서도 답을 찾을 수있는 문제가 발생했습니다 :

보기 텍스트 및 이미지가 포함 된 특정 상자 데스크톱/태블릿 및 작은 화면 (예 : 스마트 폰)을 사용할 때 이미지의 위치를 ​​다르게 지정하고 싶습니다. 데스크톱/태블릿에서 이미지의 크기가 고정되어 텍스트 옆에 표시되지만 헤드 라인 아래에는 작은 화면에 이미지가 헤드 라인과 텍스트 위에 표시되고 100 % 크기로 채워지 길 원함 .

사실, 일부 사진과 함께 보여하는 것이 더 쉬울 수 있습니다

가 나는 그것이 작은 화면을에 같이 할 방법 데스크톱/태블릿

에 보이는 방법

(바람직하지 않은) 당신은 내가 제목과 텍스트가 이미지에 포함됩니다 결과로,이 작업을 수행하는 방법을 알아 냈하지 않은 볼 수 있듯이 내가

을 수행 한 코드를 작은 화면에 결과, 그리고 상자의 경계를 존중하지 않습니다. 데스크톱/태블릿에 대한

CSS의 :

div {position: relative;} 

div img { 
width: 200px; 
float: right; 
margin-left: 40px; 
margin-bottom: 20px;} 

작은 화면에 대한 CSS :

div {position: relative;} 

div img { 
position: absolute; 
top: 20px; 
width: 100%; 
margin-bottom: 20px;} 

그리고위한 HTML이 내가 해봤 코드입니다 div :

<div> 
<h2>Sed ut perspiciatis unde omnis iste</h2> 
<img src="img/blossom.jpg"> 
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</div> 

일부 메모 : 색상, 글꼴 등은 전역 CSS에서 선언되지만이 문제에는 중요하지 않습니다. 데스크톱/태블릿 버전이 정상적으로 작동합니다. 화면이 작아지고 스마트 폰 버전이 이미지를로드 할 때 정상적으로 작동하지 않습니다. 이미지가 없으면 작은 버전이 정상적으로 작동합니다.

큰 문제는 여기 있습니다. 작은 화면 버전이로드 될 때 헤드 라인을 포함하여 모든 텍스트 위에 CSS를 사용하여 이미지를 이동하려면 어떻게해야합니까? 이미지는 상자의 너비와 텍스트를 따라야합니다.

나를 믿어 라, 나는 지금까지 행운과 함께 많은 접근을 시도했다. 그리고 나는 꼼짝 못하게되었다! 아마도 솔루션은 매우 분명하고 간단하지만 그것을 이해할 수는 없습니다. 물론 누군가가 무엇을해야하는지 알기를 바랍니다 ...?

Answer 1

픽셀 너비를 지정하면 트릭을 사용하게됩니다. 반응 형으로 사용하려면 여기와 같은 미디어 쿼리를 사용해야합니다.

@media (min-height: 680px), screen and (orientation: portrait) { 
div {position: relative;} 

div img { 
position: absolute; 
top: 20px; 
width: 200px; 
margin-bottom: 20px;} 
} 

원인 이제 화면이 아닌 이미지의 전체 너비를 사용합니다.