#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
У меня возникла проблема, я хочу установить высоту и ширину изображения внутри div, используя только Javascript и jQuery.
Вот мой код:
<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');
}
}
Есть идеи?
Ответ №1:
Атрибуты отличаются от стиля. Допустим, ваш текущий тег изображения выглядит следующим образом:
<img src="foo.png" width="200" height="200" />
После $('div.myGallery > img').removeAttr('width')
этого это будет выглядеть так:
<img src="foo.png" height="200" />
Вы удаляете атрибут width. Теперь после $('div.myGallery > img').css('width', '440px')
этого это будет выглядеть так:
<img src="foo.png" height="200" style="width: 440px;" />
Вы добавляете ширину, но это стиль CSS, а не атрибут. Попробуйте это вместо:
$('div.myGallery > img').attr('width', '440');
Ответ №2:
Это функция для подгонки изображения к тегу 586×586 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
});
}
}
Ответ №3:
Попробуйте это:
$('div.myGallery > img').css('width', '110px !important');
$('div.myGallery > img').css('height', '220px !important');
Ответ №4:
Похоже, вы устанавливаете ширину изображения больше, чем содержащий div, может ли это быть проблемой?
Yo удаление высоты и ширины removeAttr
будет работать, если оно было установлено в теге image <img src="puppies.jpg" width="100" height="100">
, в противном случае, чтобы изменить его в css, я бы установил width
и height = auto
, или, если вы хотите, чтобы контейнер определял размер, попробуйте что-то вроде width:100% height:auto
. Чтобы добавить высоту и ширину, вы .css('width','440px')
должны работать. Однако, как уже упоминалось, содержащий div меньше.
Ответ №5:
Возможно, это могло бы помочь:
.newCssClass { height : 110px !important; width : 440px !important; }
$("div.myGallery img").addClass("newCssClass");