我整个晚上都在尝试写这条消息，但它只是经常告诉我这里有代码，我没有代码，所以我又重新开始了！
我的完整原始信息在我的jsfiddle上，其中包含我想要查看的代码（今天此表单不喜欢添加的链接或代码）：
here（注意：第二天编辑，现在可以添加此链接！）
CSS：
.stretchy {overflow:hidden;min-width:300px;}
div {
font-family:'Open Sans';
}
.scrollable {overflow:auto; padding:1em;}
div.stretchy .container
{
display:block;
position:relative;
height:100%;
max-height:206px;
width:100%;
padding-left:auto;
padding-right:auto;
}
div.stretchy .container2
{
position:relative;
background-color: orange;
margin:0;
max-width:646px;
max-height:206px;
}
div.stretchy .content
{
position: relative;
background-color: yellow;
margin:auto auto 0 auto;
padding-bottom: 66.2%; /* 20 16:9 */
height:100%;
max-height:206px;
max-width:643px;
}
div.stretchy .content > div {
/*http://dabblet.com/gist/2590942*/
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
height:100%;
font-size: 24px;
text-align: center;
color:orange;
background-color: olive;
}
/* Aspect ratios to try:
*using padding-bottom:
* 56.25% = 16:9
* 75% = 4:3
* 66.66% = 3:2
* 62.5% = 8:5
*/
#slideshowWrapper
{
display:block;
position:relative;
max-height:206px;
}
#slideshow
{
position:relative;
list-style:none;
width:100%;
max-width:640px;
max-height:200px;
padding:2px;
border:1px solid #999;
margin:auto 0 0 0;
}
#slideshow li
{
text-align: left;
display: inline;
margin:0;
}
.frame
{
overflow: hidden;
width: 100%;
height: 100%;
min-height:100px;
max-height: 200px;
vertical-align:bottom;
}
.frame *
{
vertical-align:bottom;
}
.frame a img, .frame img
{
width:100%;
min-width:300px;
padding-top:auto;
}
.frame p
{
text-align:center;
}
/*
#top{background:#3b5998;width:100%;height:40px;margin-bottom:20px;}
#top h1{color:#fff;font-weight:normal;font-size:18px;padding:7px 0 0 15px}
#top h1 span{font-size:11px;}
#top h1 a{text-decoration:underline;color:#fff;}
#top h1 a:hover{text-decoration:none;}
small a{color:#000;}
*/
使用Javascript：
var imageHeight = (".frame img").height();
var extra = 6;
var newHeight = imageHeight + extra;
$ (".container".height( newHeight );
$(".container").resize(function(){
$("span").text("changed!");
});
$(window).on("resize", function()
{
//maybe this?
});
//or is it
$(document).ready(function () {
if (".container".width() < 640)
{
}
});
$(".container").on("resize", function() //was $(window)
{
$(".container").style('border', 'solid black 2px');
if (".container".width() < 640)
{
alert('argh');
}
});
//or is it
var currentwidth = $(".container").width;
$(".conainer").on("resize", function()
{
$(".container").style('width', 'calc(' + currentwidth / 3.2);
if (".container".width() < 640)
{
alert('I hope it worked');
}
});
HTML：
<div class="stretchy container">
<div class="stretchy container2"1>
<div class="stretchy content">
<div>
<div id="slideshowWrapper" class="scrollable"> HELLO, this is my first try at making a responsive div. <br>Below is my second try
<p>Hi,
I am quite new to jQuery,
...and I have been trying for weeks to work this out!
So now I turn to you before my head explodes!
**Please guys don't mark me down for asking this like with my first post, as I have tried my very best to solve and learn this by myself!
I'm not one of those people that like to ask for help out of potential embarrassment or getting no reply for the effort & time taken to ask!**
My problem:
I am have been trying, now miserably, to create a javascript/jQuery listener script that will detect when a div identified by class shrinks or grows in width.
What I actually am aiming for to keep the DIV's height at 1/3 of the width / or the equivalent height of it's contained image.
As far as I've worked out this is a correct aspect ratio
JSfiddle of what I have tried so far:
-------------------------------------
benji/8Ak6v/144/
*I have tried* posting the coding on here but the form it won't accept it for whatever reason despite me using the Ctrl-K function!
It's probably about 50 times I have tried now with no luck and give up on the code here,
I have tried using the CSS "padding-bottom:56.25%" solution mentioned here before (see other percentages below), but it really doesn't work out well as it leaves whitespace!
After hours of trying mixed CSS DIV parent/child combinations these different techniques, my mind is going loopy! Please, if you are nice enough to help, give me a jsfiddle/codepen example!
I must have watched 20 videos and read 100 web pages for help by now!
CSS "padding-bottom" Aspect ratios:
56.25% = 16:9
75% = 4:3
66.66% = 3:2
62.5% = 8:5
**If it helps**, this is for a 640x200 images in a UL list based slideshow with the occasional text & image mix frame with backgrounds of the same dimension.
The DIV container is already to stay horizontally centered with a relative position, and I am hoping it will be able to shrink equally with the image, without the image cropping or causing the current issue of whitespace below it.
MANY THANKS!
Ben
</p>
<div>
</div>
</div>
</div>
</div>
</div>
<strong>more content below, but there's an annoying space when i get's small, ho do i get rid of it? something to do with div.stretchy .content's padding. and how do i get rid og the blue border? One solution I have tried is to pin the image/content to the bottom of the container DIVs to save the whitespace showing below it, but it's not working!</strong>
<div class="stretchy container">
<div class="stretchy size">
<div class="stretchy content">
<div>
<div id="slideshowWrapper" class="resp-container">
<div class="resp-dummy"></div>
<ul id="slideshow" name="slideshow">
<li>
<div class="frame">
<a class="link" href="http://leeli.co.uk/x/images/1-full.jpg" target=
"_blank" title="1"><img src="http://leeli.co.uk/x/images/1.jpg"></a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<p>
Below content
</p>
<span>Hmm</span>
请帮助我，如果你能把它推到我身边并花了几周时间来解决这个问题
非常感谢！本