반응형
헤더 이미지를 올바르게 응답시키려면 어떻게 해야 합니까?
저는 정말 멋진 프리미엄 워드프레스 테마를 사용하여 친구를 위한 사이트를 만들려고 합니다.나는 그 테마에 대한 돈을 지불했지만 디자이너는 커스터마이즈를 도와주지 않을 것이다.
이 사이트는 현재 www.zerocarbonfood.co.uk/test/에 있습니다.원래 테마는 작은 왼쪽 정렬 로고가 있었는데, 내 친구는 이 큰 전폭 로고가 더 좋다고 생각합니다.문제는 지금 iPad나 iPhone(세로)에서 보면 로고가 너무 커서 잘못 끼워져 있다는 것입니다.테마 옵션에서는 922px 폭과 168px 높이로 정의됩니다.나는 거기에 백분율 값을 넣을 수 없다.어디선가 CSS에서 덮어쓸 수 있나요?
저는 조금 힘이 안 들어서 어떤 도움이라도 고맙게 받겠습니다.
를 max-width: 100%; height: auto;그러면 이미지의 크기가 올바르게 조정됩니다.
가장 쉬운 방법은 로고 이미지를 배경 이미지가 아닌 인라인에 삽입하는 것입니다.이를 통해 CSS를 img 요소 자체에 적용할 수 있습니다.
HTML
<div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>
CSS
#logo-container img {
width: 100%;
height: auto;
}
css에서 다음 미디어 조건을 사용할 수 있습니다.
/* Resize Background*/
@media only screen and (max-width: 800px) {
#header{
width: 100%;
height: auto;
background-size: 100% auto !important;
}
}
링크가 아닌 이미지를 스타일링해 보세요.
logo-container img {
width: 100%;
height:auto;
}
px 대신 %를 사용해 보십시오.이렇게 하면 이미지 크기가 페이지 크기에 따라 조정됩니다.
HTML에서 다음과 같은 것을 시도할 수 있습니다.
<img src="logo.png" width="80%" height="80%"/>
화면 폭에 따라 확장됩니다.물론 가로 세로 비율을 유지하기 위해 높이도 조정해야 합니다.
참고로 Android 폰을 줌아웃하면 사이트가 정상으로 보입니다.
해라
#logo-container img {
width: 100%; !important
height: auto; !important
}
이전 값을 덮어씁니다.
이미지를 어떻게 확대/축소합니까?
다음은 샘플 html입니다.
<footer>
<!-- Main Footer -->
<section class="section background-dark">
<div class="line">
<div class="margin">
<!-- Column 1 -->
<div class="s-12 m-12 l-4 margin-m-bottom-2x">
<h4 class="text-uppercase text-strong">Our Philosophy</h4>
<p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>
<div class="line">
<h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8 margin-m-bottom">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
<!-- Column 2 -->
<div class="s-12 m-12 l-4 margin-m-bottom-2x">
<h4 class="text-uppercase text-strong">Contact Us</h4>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-placepin text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><b>Adress:</b> Responsive Street 7, London, UK</p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-mail text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><a href="/" class="text-primary-hover"><b>E-mail:</b> contact@sampledomain.com</a></p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-smartphone text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><b>Phone:</b> 0700 000 987</p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-twitter text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><a href="/" class="text-primary-hover"><b>Twitter</b></a></p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-facebook text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11">
<p><a href="/" class="text-primary-hover"><b>Facebook</b></a></p>
</div>
</div>
</div>
<!-- Column 3 -->
<div class="s-12 m-12 l-4">
<h4 class="text-uppercase text-strong">Leave a Message</h4>
<form class="customform text-white">
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-6">
<input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
</div>
<div class="s-12 m-12 l-6">
<input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
</div>
</div>
</div>
<div class="s-12">
<textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
</div>
<div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div>
</form>
</div>
</div>
</div>
</section>
<hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">
<!-- Bottom Footer -->
<section class="padding background-dark">
<div class="line">
<div class="s-12 l-6">
<p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
<p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
</div>
<div class="s-12 l-6">
<a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
</div>
</div>
</section>
</footer>
다음은 css의 일부입니다.
a, a:link, a:visited, a:hover, a:active {
color: #777;
}
.text-primary, .text-primary *, .primary-color-primary .text-primary, .primary-color-primary .text-primary * {
color: #49BF4C !important;
}
.text-primary-hover:hover, .primary-color-primary .text-primary-hover:hover {
color: #49BF4C !important;
}
.text-white, .text-white *, .primary-color-white .text-primary, .primary-color-white .text-primary * {
color: #fff !important;
}
.background-primary, .primary-color-primary .background-primary {
background-color: #49BF4C !important;
}
.margin-bottom-10 {
margin-bottom: 10px !important;
display: block;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #000;
margin-bottom: 15px;
margin-top: 0;
}
h4, .h4 {
font-size: 1.1rem;
}
@media screen and (max-width: 768px) {
.margin-m-bottom {
margin-bottom: 1.25rem !important;
display: block;
}
}
.image-hover-zoom:hover img {
transform: scale(1.1);
}
/*SAmple*/
.section {
padding: 6rem 1.25rem;
}
.background-dark, .primary-color-dark .background-primary {
background-color: #002633 !important;
}
.background-dark, .background-dark p, a.background-dark, a.background-dark:visited, a.background-dark:link, .background-dark a, .background-dark a:link, .background-dark a:visited, .background-dark a:hover, .background-dark a:active, .primary-color-dark .background-primary, .primary-color-dark .background-primary p, .primary-color-dark a.background-primary, .primary-color-dark a.background-primary:visited, .primary-color-dark a.background-primary:link, .primary-color-dark a.background-primary:visited, .primary-color-dark .background-primary a, .primary-color-dark .background-primary a:link, .primary-color-dark .background-primary a:visited, .primary-color-dark .background-primary a:hover, .primary-color-dark .background-primary a:active {
color: #7697A2;
}
hr.break {
border: 0;
border-top: 1px solid #e5e5e5;
display: block;
margin: 40px 0;
}
.margin-top-bottom-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block;
}
hr.break:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.text-size-12, .text-l-size-12 {
font-size: 12px !important;
line-height: 1.4;
}
p {
color: #777;
font-size: 0.85rem;
line-height: 1.6rem;
}
.background-dark h1, .background-dark h2, .background-dark h3, .background-dark h4, .background-dark h5, .background-dark h6, .background-dark .h1, .background-dark .h2, .background-dark .h3, .background-dark .h4, .background-dark .h5, .background-dark .h6, .primary-color-dark .background-primary h1, .primary-color-dark .background-primary h2, .primary-color-dark .background-primary h3, .primary-color-dark .background-primary h4, .primary-color-dark .background-primary h5, .primary-color-dark .background-primary h6, .primary-color-dark .background-primary .h1, .primary-color-dark .background-primary .h2, .primary-color-dark .background-primary .h3, .primary-color-dark .background-primary .h4, .primary-color-dark .background-primary .h5, .primary-color-dark .background-primary .h6, .background-primary h1, .background-primary h2, .background-primary h3, .background-primary h4, .background-primary h5, .background-primary h6, .background-primary .h1, .background-primary .h2, .background-primary .h3, .background-primary .h4, .background-primary .h5, .background-primary .h6, .primary-color-primary .background-primary h1, .primary-color-primary .background-primary h2, .primary-color-primary .background-primary h3, .primary-color-primary .background-primary h4, .primary-color-primary .background-primary h5, .primary-color-primary .background-primary h6, .primary-color-primary .background-primary .h1, .primary-color-primary .background-primary .h2, .primary-color-primary .background-primary .h3, .primary-color-primary .background-primary .h4, .primary-color-primary .background-primary .h5, .primary-color-primary .background-primary .h6 {
color: #fff;
}
.text-uppercase {
text-transform: uppercase;
line-height: 1;
}
b, strong, .text-strong {
font-weight: 700;
}
h4, .h4 {
font-size: 1.1rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #000;
margin-bottom: 15px;
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #152732;
font-weight: normal;
line-height: 1.3;
margin: 0.5rem 0;
}
h4 {
font-size: 1.4rem;
}
.text-size-20, .text-l-size-20 {
font-size: 20px !important;
line-height: 1.4;
}
.margin-top-30 {
margin-top: 30px !important;
display: block;
}
a.text-more-info:after {
content: "\f006";
font-family: mfg;
font-size: 0.8rem;
margin-left: 0.625rem;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
a.text-more-info {
display: block;
font-size: 0.85rem;
margin-top: 0.625rem;
}
.text-white-hover, .text-primary-hover, .text-dark-hover {
transition: color 0.20s linear 0s;
-o-transition: color 0.20s linear 0s;
-ms-transition: color 0.20s linear 0s;
-moz-transition: color 0.20s linear 0s;
-webkit-transition: color 0.20s linear 0s;
}
.image-hover-zoom {
display: block;
overflow: hidden;
}
.image-hover-zoom img {
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
헤더에 뷰포트 메타 태그를 사용했습니까?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
언급URL : https://stackoverflow.com/questions/17722132/how-can-i-make-my-header-image-properly-responsive
반응형
'source' 카테고리의 다른 글
| 경고: 실패한 하위 컨텍스트 유형:'cellRenderer'에 제공된 'number' 유형의 하위 컨텍스트 'virtualizedCell.cellKey'가 잘못되었습니다. 'string'이 필요합니다. (0) | 2023.03.23 |
|---|---|
| JS 해시 변경 이벤트 관련 msie 문제 (0) | 2023.03.23 |
| AngularJS UI 라우터 - 상태를 다시 로드하지 않고 URL 변경 (0) | 2023.03.23 |
| Angular와 함께 사용할 애플리케이션 구조JS랑 라라벨? (0) | 2023.03.23 |
| 치명적인 오류: auto-global 변수 _POST를 재할당할 수 없습니다. (0) | 2023.03.23 |