Getting div height with php and applying it to an image
as the title said i am trying to use php to get the height of a < div> element then with that value, applying to an image. This would actually shrink the image or stretch the image. As i am still new to coding, i searched online and what i found is only solution 开发者_开发问答of doing it in javascript, which is something like this
DivHeight = document.getElementById("TheDiv").offsetHeight
but i couldn't find any that uses php to do so.
php is a server side language, which you cannot get the height of a div.
you may specify the image size by adding attributes
You want to set the image size AFTER the div object has been rendered as to fill said div object (or something to that effect), but the div object's size is variable. In such a scenario, you cannot use height: 100% because the parent object, the div object in this case, must have a definite value defined in the CSS code. Javascript is the only answer for this one.
Do this:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#theImagesId').css({"height":$(".theDivsId").height(), "width": $(".theDivsId").width()});
});
</script>
</head>
also you'll need to download this file that is referenced from jquery (the minified version will suffice): http://docs.jquery.com/Downloading_jQuery#Download_jQuery
source: http://www.w3schools.com/jquery/jquery_intro.asp
You can't get the div's height in PHP, as when the page is rendered and the div is displayed, PHP has already gone away. The only way to do that is to get the height with javascript, then get the image via AJAX.
You know, you can shrink the image with only javascript by changing the width and height of the image. The results are not optimal, but it will probably work just fine for your purposes.
As others here said, you can't do this with PHP. But why not just use CSS?
If the containing DIV has a height and width, you can set the image style to fill that space (stretching or shrinking in the process) with:
.imgclass {
height: 100%
width: 100%
}
However, if you want to actually resize the images physically on the server, then you have to use AJAX and request the new image via Javascript (which may be slow, depending on how long it'd take your server to generate them).
I would recommend against the latter, unless you pre-build a bunch of sizes and use the one that matches closest and then resize it in the browser with CSS.
As mentioned, 'client side' code has to do this, as HTML (divs, images etc - the stuff you are trying to manipulate) is rendered on the client side. That means javascript. I recommend using the jquery library - the following line should do it:
$('#theImagesId').css({width: $('#theDivsId').height()+"px"});
However, what you are trying to do sounds a little odd? Also bare in mind that the returned height may be smaller than it should, if there is already an image or something loading in the div. This is because the javascript will execute once the DOM has loaded (so, all the actual html code), but not necessarily the images within it.
加载中,请稍侯......
精彩评论