Inside the div with class slotholder is an image of class defaultimg with height and width added automatically. I want to change specially image height and width.
Here is the code:
<div class="slotholder">
<img class="defaultimg" alt="" src="image.png" style="width: 1399px;
height: 724.45px; position: relative; left: -25px; opacity: 0;">
I have tried to change width and height in css like:
img .defaultimg{
width:1570px !important;
height:813px !important;
}
But isn't working. How can I change this by CSS or jQuery?
If you want to change width and height of the slider, look into the documentation of the revolution slider script. There you'll find all the settings, including e.g. the gridwidth and gridheight options to set the size of your slider even for different viewport sizes.
So on initializing your slider, you could do the following:
jQuery(document).ready(function() {
jQuery("#your-slider").revolution({
gridwidth:1570,
gridheight:813
});
});
If you already initialize your slider with some settings, just add the gridwidth and gridheight options.
This is a more proper solution than trying to overwrite the generated styles with CSS !important declarations.
The problem is your selector:
img .defaultimg
Searchs for an element with class defaultimg inside an img (which isn't possible by the way)
What you need is the img element with class defaultimg remove the space like this:
img.defaultimg
Related
I implemented resize in image using quill-image-resize-module in vue2-editor, but now the width attribute is added to img and I want to copy it to the style attribute.
In the implementation of what I made, the img tag is css with width: calc (100% + 32px);
Because there is a translation and this cannot be corrected, I would like to be able to display something smaller or larger than the specified one by putting the size in the image with style.
It is like this in the current situation.
<img alt src="https://**********" width="100px">
I want to change it like this.
<img alt src="https://**********" style="width:100px">
Try to move the style tag to your css:
.img {
width: 100px !important;
}
or if you use other img tags which should not be adjusted:
Your css:
#yourChoosenId {
width: 100px !important;
}
Your html:
<img alt src="https://**********" id="yourChoosenId">
I am working with kendoui, and it is a nightmare to take on element and automatically expand it to fit to its parent.
Is there any plugin for kendoui / jquery to automatically take any element (grid/panel/div) and fit to its parent?
it also need to support parent size change.
$("#kendoGrid").fitToParent();
Edit
Then doing fitToParent, the child div (#kendoGrid) will be 100% width and height of its parent.
The grid widget is a bit frustrating to size its height because it puts a height CSS style on the element, and you can only specify pixel sizes for that height.
However, you can work around it with a CSS !important indicator (which I hate, but what can you do?)
<div id="wrapper">
<div id="grid"></div>
</div>
#wrapper {
height: 200px;
}
#grid {
height: 100% !important;
}
I would like to change the CSS using javascript so that I can dynamically adjust the height of a single image on my web page. This is being done so that the image will fit nicely in the viewable screen no matter what the screen size.
My CSS
.wrapper img {
height: 630px;
}
My Div
<div class="wrapper" id="imageDiv"></div>
What javascript code should I use to change the CSS height to say 200px.
Thank you.
Why not just set the height in percentage if the goal is to autoadjust based on viewport height etc:
.wrapper img {
height: 100%;
}
Anyway:
document.getElementById('imageDiv').style.height = '200px';
Try this :
document.getElementById("imageDiv").style.height="200px";
(this would only change it for that one element.)
Using JQuery, you could just put inside the method that you want:
$('img.wrapper').css('height','200px');
I'm developing a mobile version of a TYPO3 site. There I use the plugin nivoslider which uses the official known Nivo Slider. Now I have to reduce the size of the slider. How can I reach this?
In TYPO3 there is a setting on the plugin page with width and height but this would affect also the full size website. Because there is no manual I don't think I can use Typoscript to set the width and the height afterwards.
I tried to set the width with CSS
.nivoSlider {
width: 300px !important;
height: auto !important;
}
.nivoSlider img {
width: 300px !important;
height: auto !important;
}
but when the slider is loaded it uses the normal size of the pictures. Only the slider container itself is cropping the images but it has a wrong height (only dots and a small part of the image can be seen).
I also tried to look into the documentation to see if I could set the width and the height somehow. But I didn't found any settings. Are there any javascript/jquery solutions I could use? This doesn't work:
$(document).ready(function() {
$('.nivoslider img').each(function(index, element){
alert('test');
$(this).width(300);
var src = $(this).attr("src");
src = 'fileadmin/templates/timthumb/timthumb.php?src=' + src + '&w=300';
$(this).attr("src", src);
});
});
It seems that .nivoslider is built afterwards, but my code is executed before. This is the confirmation:
if ($('.nivoslider').length != 0) {
alert('element found');
}else{
alert('element NOT found');
}
The code above gives me element NOT found, because the initialisation of extension is at the end of the header and my code is before. How can I include Javascript code at the end of the header in TYPO3?
Now I think I will use this CSS, because I don't see any solution:
.nivoslider {
display: none;
}
You want to take a look at this...
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
########################## UPDATE #############################
The above link has been removed, please see the following for example:
http://www.flynsarmy.com/wp-content/uploads/2012/09/nivoslider/index.html
change height by changing the height in the img tag in the html file and change width by changing the width in .slider-wrapper in style.css.
I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?
Adding some code:
<div data-role="content" style="background-color: #000000">
<div id="slogandiv">
<img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
</div>
I just did this. It is because that the data-role = "content" has a automated padding of 15px.
I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.
A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.
Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:
.container {
background: url('image.png') no-repeat;
background-size: contain;
width: 480px;
height: 240px
}
… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).
background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!