根据文本框自动调整图像高度
Auto-adjust image height depending on textbox
我正在寻找一种根据文本框大小自动调整图像高度的方法。文本框的高度将根据浏览器 window 的大小(
首先,图片要与文本框的高度相匹配
随着 window 的大小调整,图片的高度也随之调整
这是我目前的 html 和 css 代码:
INDEX.HTML
<div class="wrapper">
<img id="about" src="images/about.jpg">
<div class="textbox">
Lorem ipsum dolor sit amet....
</div>
</div>
MAIN.CSS
.wrapper {
}
#about {
float:right;
padding-left: 25px;
}
.textbox {
width: 50%;
}
如果您不关心图片的纵横比,这从您的问题中可以看出,您可以试试这个:
CSS:
html, body {
width:100%;
height:100%;
}
.container {
font-size:0;
border:1px solid red;
display:table;
}
.container>div {
display:table-cell;
width:50%;
font-size:12px;
height:inherit;
}
.container>div.rhs {
background-image:url(http://www.lorempixel.com/600/200/sports/1/);
background-size:cover;
background-repeat:no-repeat;
}
HTML:
<div class="container">
<div class="lhs">Dummy Text</div>
<div class="rhs"></div>
</div>
演示:http://jsfiddle.net/GCu2D/588/
技巧是使用与 css 中的 background-image
相同的图像,而不是使用 img
标签
怎么样:
http://codepen.io/jlowcs/pen/MYXXyv
HTML:
<div class="wrapper">
<div class="textbox">
<p>Lorem ipsum dolor sit amet...</p>
</div
><img id="about" src=images/about.jpg">
</div>
CSS:
.wrapper {
position: relative;
}
.textbox {
display: inline-block;
width: 50%;
}
#about {
position: absolute;
padding-left: 25px;
box-sizing: border-box;
max-height: 100%;
max-width: 50%
}
不使用浮动,而是使用绝对定位。只是一个想法,可能会有更好的方法。
这样,你可以保持宽高比,但文本和图像的宽度不会适应。或者也许有人可以找到一种方法:)
我正在寻找一种根据文本框大小自动调整图像高度的方法。文本框的高度将根据浏览器 window 的大小(
首先,图片要与文本框的高度相匹配
随着 window 的大小调整,图片的高度也随之调整
这是我目前的 html 和 css 代码:
INDEX.HTML
<div class="wrapper">
<img id="about" src="images/about.jpg">
<div class="textbox">
Lorem ipsum dolor sit amet....
</div>
</div>
MAIN.CSS
.wrapper {
}
#about {
float:right;
padding-left: 25px;
}
.textbox {
width: 50%;
}
如果您不关心图片的纵横比,这从您的问题中可以看出,您可以试试这个:
CSS:
html, body {
width:100%;
height:100%;
}
.container {
font-size:0;
border:1px solid red;
display:table;
}
.container>div {
display:table-cell;
width:50%;
font-size:12px;
height:inherit;
}
.container>div.rhs {
background-image:url(http://www.lorempixel.com/600/200/sports/1/);
background-size:cover;
background-repeat:no-repeat;
}
HTML:
<div class="container">
<div class="lhs">Dummy Text</div>
<div class="rhs"></div>
</div>
演示:http://jsfiddle.net/GCu2D/588/
技巧是使用与 css 中的 background-image
相同的图像,而不是使用 img
标签
怎么样:
http://codepen.io/jlowcs/pen/MYXXyv
HTML:
<div class="wrapper">
<div class="textbox">
<p>Lorem ipsum dolor sit amet...</p>
</div
><img id="about" src=images/about.jpg">
</div>
CSS:
.wrapper {
position: relative;
}
.textbox {
display: inline-block;
width: 50%;
}
#about {
position: absolute;
padding-left: 25px;
box-sizing: border-box;
max-height: 100%;
max-width: 50%
}
不使用浮动,而是使用绝对定位。只是一个想法,可能会有更好的方法。
这样,你可以保持宽高比,但文本和图像的宽度不会适应。或者也许有人可以找到一种方法:)