반응 형 이미지 만들기-가장 간단한 방법
이 질문에 이미 답변이 있습니다.
휴대폰이나 태블릿 크기로 축소하면 모든 텍스트, 링크 및 소셜 아이콘이 그에 따라 확장된다는 사실에서 내 코드가 반응하는 것을 알 수 있습니다.
그러나 그렇지 않은 유일한 것은 내 몸의 이미지입니다. 단락 태그로 묶여 있습니다 ... 그렇게 말하면 이미지를 반응 형으로 만드는 간단한 방법이 있습니까?
본문에 내 이미지를 표시하는 데 사용한 코드는 다음과 같습니다.
<body>
</center>
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
</center>
</body>
시도해 볼 수 있습니다.
<p>
<a href="MY WEBSITE LINK" target="_blank">
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</a>
</p>
유동적 인 레이아웃 인 경우 이미지 크기를 조정해야합니다.
반응 형 (레이아웃이 창 크기에 반응 함)의 경우 이미지에 클래스를 추가하고 @mediaCSS의 쿼리를 사용하여 이미지 의 너비를 변경할 수 있습니다.
이미지의 높이를 변경하면 비율이 엉망이됩니다.
너비 : 더 넓은 곳에서 볼 때 100 % 깨집니다.
다음은 Bootstrap의 img-responsive입니다.
max-width: 100%;
display:block;
height: auto;
또한 HTML 파일이 아닌 다른 파일에있는 모든 CSS 속성을 사용하여 코드를 더 잘 구성 할 수 있도록하는 것이 좋습니다.
따라서 img를 반응 형으로 만들려면 다음을 수행합니다.
먼저 HTML 파일에서 또는 속성을 <img>사용 하여 태그 이름을 지정 합니다.classid
<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">
그런 다음 CSS 파일에서 응답하도록 변경합니다.
.responsive-image {
height: auto;
width: 100%;
}
이 기술을 사용하여 간단한 방법으로 모바일 장치에서 로고를 반응 형으로 유지합니다. 로고 크기가 자동으로 조정됩니다.
HTML
<div id="logo_wrapper">
<a href="http://example.com" target="_blank">
<img src="http://example.com/image.jpg" border="0" alt="logo" />
</a>
</div>
CSS
#logo_wrapper img {
max-width: 100%;
height: auto;
}
웹 사이트의 모든 이미지를 반응 형으로 만들려면 width:100%모든 브라우저에서 작동하지 않고 Firefox에서 문제를 일으키 므로 올바른 마크 업에서 인라인 HTML을 변경 하지 마십시오. 일반적으로 다음과 같은 방식으로 웹 사이트에 이미지를 배치하려고합니다.
<img src="image.jpg" width="1200px" height="600px" />
그런 다음 CSS에 모든 이미지 최대 너비가 100 %이고 높이가 자동으로 설정되어 있음을 추가합니다.
img {
max-width: 100%;
height: auto;
}
이렇게하면 코드가 모든 브라우저에서 작동합니다. 또한 이미지가 인라인 HTML로 코딩 된 실제 이미지 크기를 필요로하는 사용자 지정 CMS 클라이언트 (예 : Cushy CMS)에서도 작동하며, 이미지를 반응 형으로 만드는 데 필요한 모든 작업이 최대 너비가 100 %이고 높이가 자동으로 설정된 CSS 파일입니다. 잊지 마세요. 그렇지 않으면 height: auto이미지가 제대로 확장되지 않습니다.
나는 이것을 항상 사용한다
You can customize the img class and the max-width property:
img{
width: 100%;
max-width: 800px;
}
max-width is important. Otherwise your image will scale too much for the desktop. There isn't any need to put in the height property, because by default it is auto mode.
If you are constrained to using an <img> tag:
I've found it much easier to set a <div> or any other element of your choice with a background-image, width: 100% and background-size: 100%.
This isn't the end all be all to responsive images, but it's a start. Also, try messing around with background-size: cover and maybe some positioning with background-position: center.
CSS:
.image-container{
height: 100%; /* It doesn't have to be '%'. It can also use 'px'. */
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url(../img/exampleImage.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: 100%;
}
HMTL:
<div class="image-container"></div>
To make an image responsive use the following:
CSS
.responsive-image {
width: 950px;//Any width you want to set the image to.
max-width: 100%;
height: auto;
}
HTML
<img class="responsive-image" src="IMAGE URL">
Set height or the width of the image to be %100.
There is more in Stack Overflow question How do I auto-resize an image to fit a 'div' container?.
Images should be set like this
img { max-width: 100%; }
Use Bootstrap to have a hustle free with your images as shown. Use class img-responsive and you are done:
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
Instead of adding CSS to make the image responsive, adding different resolution images w.r.t. different screen resolution would make the application more efficient.
Mobile browsers don't need to have the same high resolution image that the desktop browsers need.
Using SASS it's easy to use different versions of the image for different resolutions using a media query.
참고URL : https://stackoverflow.com/questions/15458650/make-an-image-responsive-the-simplest-way
'code' 카테고리의 다른 글
| 문자를 대문자로 변환 (0) | 2020.10.28 |
|---|---|
| JSR 303 유효성 검사, 한 필드가 "something"과 같으면 다른 필드는 null이 아니어야합니다. (0) | 2020.10.28 |
| 여러 파일을 Gulp-Watch하는 방법? (0) | 2020.10.28 |
| React Native App에 하이퍼 링크 표시 (0) | 2020.10.28 |
| Angular에서 ngFor repeat를 일부 항목 수로 제한하려면 어떻게해야합니까? (0) | 2020.10.28 |