0
私のヘッダーh1を、画像のインラインであるブラウザーのサイズで自動的にサイズ変更して、小さな画面で見たときに画面サイズの大部分を占めないようにします。イメージのためのスペースを残します。また、ヘッダーh3の世話をしてください。つまり、必要なスペースを取る必要があります。イメージのインラインであるCSSのヘッダーのサイズを自動的に変更します
コード：私は、Firefox 53.0.3を使用しています（32ビット）
：あなたはjsfiddle here<body>
<div id="main_wrapper">
<header>
<div id="header_title">
<h1>Lorem Ipsum dolor sit amet facilisis ut </h1>
<h3>"Vivamus sed libero nec mauris pulvinar facilisis ut non sem."</h3>
</div>
<aside id="header_photo">
<img src="http://3.bp.blogspot.com/-hSDYcX9cd5w/UZnDC0Z27PI/AAAAAAAAAGg/WmWDp_cZfw4/s1600/lorem-ipsum-dolor-sit-amet-5.png" alt="Placeholder" class="floatingimage" title="Placeholder" />
</aside>
</header>
</div>
</body>
body {
background-size: 120%;
font-family: 'MyFont', Arial, sans-serif;
color: #181818;
}
#main_wrapper {
width: 80%;
margin: auto;
}
header {
width: 100%;
height: auto;
margin: 0;
padding: 0 0 40%;
}
#header_title {
text-align: center;
max-width: 78%;
}
#header_photo {
/*display: none;*/
margin: 0;
padding: 0;
max-width: 20%;
height: auto;
float: right;
}
.floatingimage {
position: relative;
display: none;
}
.wh100 {
width: 100px;
height: 100px;
}
@media all and (max-width:1024px) {
#main_wrapper {
width: auto;
margin: none;
}
#header_title,
#header_photo img {
margin: 0;
padding: 0;
display: inline!important;
vertical-align: middle!important;
}
#header_title {
max-width: 78%;
position: relative;
float: left;
}
#header_photo {
margin-top: 4%;
max-width: 20%;
position: relative;
float: right;
}
#header_photo img {
position: relative;
max-width: 100%;
height: auto;
}
}
NOTE上のコードを見つけることができます
ための単位は、あなたがこのような何かを探していますか？ https://jsfiddle.net/91sung8y/3/ –
ありがとうございました。 – n00b
あなたは大歓迎です。それがあなたのために行くかどうかは分かりませんでした。答えとして提出されます。 –