ZeroShade Posted August 15, 2007 Share Posted August 15, 2007 How can I take a huge image and resize it to fit inside a panel thats 600 by 400? Lets say the image is 2000 by 1700. Link to comment Share on other sites More sharing options...
aspnetguy Posted August 15, 2007 Share Posted August 15, 2007 first off I will point out that it would be better to crop the image to save on download times but if that isn't an option you can do this Link to comment Share on other sites More sharing options...
aspnetguy Posted August 15, 2007 Share Posted August 15, 2007 first off I will point out that it would be better to crop the image to save on download times but if that isn't an option you can do this with javascript <img id="image1" src="your image" alt=""/> <script type="text/javascript"> var image = document.getElementById("image1"); image.style.width = "600px"; image.style.height = "400px"; </script> or this with CSS ....resize{ width: 600px; height: 400px;}...<img id="image1" src="your image" alt="" class="resize"/> Link to comment Share on other sites More sharing options...
ZeroShade Posted August 15, 2007 Author Share Posted August 15, 2007 Its probably easier if I showed you what I already have... maybe you can tell me why it doesn't work: <script type="text/javascript" language="javascript"> var xmlHttpRequestObject = false; try { // Firefox, Opera 8.0+, Safari xmlHttpRequestObject = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttpRequestObject = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); window.location="Default.aspx"; } } } function changeImage(img) { if (xmlHttpRequestObject) { var obj = document.getElementById("ViewImage"); xmlHttpRequestObject.open("GET", img); xmlHttpRequestObject.onreadystatechange = function() { if(xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200) { // The state is complete and the status is successful. } } int originalHeight = obj.width; int originalWidth = obj.height; int panelWidth = 576; int panelHeight; if (originalHeight >= originalWidth) { panelHeight = panelWidth * (originalWidth / originalHeight); panelWidth = originalWidth / (originalHeight / panelHeight); } else { panelWidth = panelWidth * (originalHeight / originalWidth); panelHeight = originalHeight / (originalWidth / panelWidth); } obj.style.width = panelWidth; obj.style.height = panelHeight; obj.src = "album/" + img; } else { alert("Your browser does not support AJAX!"); window.location="Default.aspx"; } } function changeDescription(desc) { if (xmlHttpRequestObject) { var descObj = document.getElementById("objDesc"); xmlHttpRequestObject.open("GET", desc); xmlHttpRequestObject.onreadystatechange = function() { if(xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200) { // The state is complete and the status is successful. } } descObj.innerHTML = desc; } else { alert("Your browser does not support AJAX!"); window.location="Default.aspx"; } } </script> <div style="background-image:url('img/Header.png'); background-repeat:no-repeat; height:50px; font-family:Verdana; text-align:center; font-size:medium; font-weight:bold; "> <br />Photos </div> <center> <asp:Panel ID="ImageViewPanel" runat="server" Height="432px" Width="576px" BorderColor="white" BorderWidth="5px"> <asp:FormView ID="ImageFormView" runat="server" DataSourceID="ImageObjectDataSource" DataKeyNames="ImageId"> <ItemTemplate> <img src='album/<%# Eval("ImageName") %>' id="ViewImage" alt="" /> <div id="objDesc"><%# Eval("ImageDescription") %></div> </ItemTemplate> </asp:FormView> </asp:Panel> <p /><asp:DataList ID="ImageDataList" RepeatDirection="Horizontal" RepeatColumns="5" runat="server" DataKeyField="ImageId" DataSourceID="ImageObjectDataSource"> <ItemTemplate> <div style="padding:10px;"> <img src='album/thumb_<%# Eval("ImageName") %>' onclick="changeImage('<%# Eval("ImageName") %>'); changeDescription('<%# Eval("ImageDescription") %>')" alt='<%# Eval("ImageDescription") %>' style="background-color:White;" /> </div> </ItemTemplate> </asp:DataList> </center> Link to comment Share on other sites More sharing options...
jesh Posted August 15, 2007 Share Posted August 15, 2007 I believe the problem is here: obj.style.width = panelWidth;obj.style.height = panelHeight; Change that to this: obj.style.width = panelWidth + "px";obj.style.height = panelHeight + "px"; Link to comment Share on other sites More sharing options...
ZeroShade Posted August 15, 2007 Author Share Posted August 15, 2007 I put the px in after the width and height... and I'm debugging it right now.Its strange because int originalHeight = obj.width; where obj.width = 51 and int originalWidth = obj.height; where obj.height = 23.I doubt this is the problem but those are the height and widths of the thumbnails. But obj isn't a thumbnail. It should be the original picture.It also says on the thumbnail image I click on that an object is expected. Why would this be after I put in the height and width code? Link to comment Share on other sites More sharing options...
ZeroShade Posted August 17, 2007 Author Share Posted August 17, 2007 I finally figured it out... I made the mistake and casted my variables as int and not var. Link to comment Share on other sites More sharing options...
jesh Posted August 17, 2007 Share Posted August 17, 2007 Hah! I was just working on another project and wrote: string test = "This is a test";alert(test); It took me a bit to realize that I was supposed to be using javascript rather than C#. Link to comment Share on other sites More sharing options...
ctoz Posted August 18, 2007 Share Posted August 18, 2007 It can be done just with CSS.#BigPicDiv {width:whateverpx}#bigPic {width:100%; height:auto} <div id="BigPicDiv"><img id="bigPic" src="mybigpic.gif" /></div>that's all... you could make the div width in ems, in which case the whole shebang will change size if you resize text; or you could do it in percentage, in which case the whole shebang will change as the window is resized. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.