0
我希望我的標題h1能夠自動調整與圖像內嵌的瀏覽器大小，以便在小屏幕中查看時不會佔用大部分屏幕大小，將爲圖像留下一些空間。也請注意頭部h3，也應該佔用所需的空間。在與圖像內嵌的CSS中自動調整標題的大小
代碼：
你可以找到的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;
}
}
注意代碼：我使用的是Firefox 53.0.3（32位）
你在找這樣的事情？ https://jsfiddle.net/91sung8y/3/ –
謝謝你的作品。 – n00b
不客氣。不知道這是否是你要做的。作爲答案提交。 –