javascript 使用javascript和jquery设置div内图像的高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7845167/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set height and width of image inside div using javascript and jquery
提问by ravidev
I have a problem were I want to set the height and width of image inside the div using only Javascript and JQuery.
我有一个问题，我想仅使用 Javascript 和 JQuery 在 div 内设置图像的高度和宽度。
Here is my code:
这是我的代码：
<div class="myGallery">
<img class="replaced" src="myimage.jpg" style="display: inline;">
</div>
.myGallery {
display: table-cell;
height: 220px;
text-align: center !important;
vertical-align: middle !important;
width: 110px;
}
.myGallery img {
text-align: center;
vertical-align: middle;
width: auto !important;
}
function ChangeHW(hdnValue)
{
if (hdnValue==1)
{
//i want to remove height and width attribute of image
//this is working..
$('div.myGallery > img').removeAttr('width');
$('div.myGallery > img').removeAttr('height');
}
else
{
//i want to set height and width attribute of image
//this is not working..i cant set width-height using this line od code
$('div.myGallery > img').css('width', '110px');
$('div.myGallery > img').css('height', '220px');
}
}
Any ideas?
有任何想法吗？
回答by Matt Bradley
Attributes are different than style. Say your current image tag looks like this:
属性不同于风格。假设您当前的图像标签如下所示：
<img src="foo.png" width="200" height="200" />
After $('div.myGallery > img').removeAttr('width'), it will look like this:
之后$('div.myGallery > img').removeAttr('width')，它看起来像这样：
<img src="foo.png" height="200" />
You are removing the width attribute. Now after $('div.myGallery > img').css('width', '440px'), it'll look like this:
您正在删除 width属性。现在之后$('div.myGallery > img').css('width', '440px')，它看起来像这样：
<img src="foo.png" height="200" style="width: 440px;" />
You're adding in width, but it's the CSS style and not the attribute. Try this instead:
您正在增加宽度，但它是 CSS 样式而不是属性。试试这个：
$('div.myGallery > img').attr('width', '440');
回答by Rohit
Try this:
试试这个：
$('div.myGallery > img').css('width', '110px !important');
$('div.myGallery > img').css('height', '220px !important');
回答by Fuzzy Logic
This is a function to fit an image to 586x586 div tag.
这是一个使图像适合 586x586 div 标签的函数。
function img_fit(img_id){
var img_width = $("#"+img_id).width();
var img_height= $("#"+img_id).height();
var max_side = Math.max(img_width, img_height);
var top = 0, left = 0, scale = 0;
var new_width, new_height,new_scale;
scale = (max_side == img_height)? img_height/586 : img_width/586;
if(max_side == img_height){
new_width = img_width / scale;
new_height = 586;
top = 0;
left = Math.round((586 - new_width)/2);
$("#"+img_id).animate({
'width':new_width,
'height':new_height,
'top':0,
'left':left,
'duration':300
});
//$("#"+img_id).width(new_width);
//$("#"+img_id).height(586);
new_scale = 586*scale/img_height;
}
else{
new_height = img_height / scale;
new_width = 586;
top = Math.round((586 - new_height)/2);
//top = 0;
left = 0;
$("#"+img_id).animate({
'width':new_width,
'height':new_height,
'top':top,
'left':0,
'duration':300
});
}
}
回答by Rohit
Maybe this could help:
也许这可以帮助：
.newCssClass { height : 110px !important; width : 440px !important; }
$("div.myGallery img").addClass("newCssClass");
回答by Last Rose Studios
You look to be setting the image width larger than the containing div, could that be the problem?
您希望将图像宽度设置为大于包含的 div，这可能是问题所在吗？
Yo remove the height and width removeAttrwould work if it was set in the image tag <img src="puppies.jpg" width="100" height="100">, otherwise, to change it in the css, I would set widthand height = auto, or if you want the container to determine the size try something like width:100% height:auto.
To add height and width your .css('width','440px')should work. However as mentioned the containing div is smaller.
removeAttr如果在图像标签中设置了高度和宽度，则删除它会起作用<img src="puppies.jpg" width="100" height="100">，否则，要在 css 中更改它，我将设置width和height = auto，或者如果您希望容器确定大小，请尝试类似 width:100% height:auto. 要添加高度和宽度，您.css('width','440px')应该工作。但是，如前所述，包含的 div 较小。
