I am using svg with grunticon, and I want to set the hight and width to 100% of svg tag,I know that it can be done with js but can it be done by style or css or grunt options?
If is please add example
I am using the html like this:
<div class="icon-napoleon" data-grunticon-embed></div>
The SVG image is generated inside your div element, so the CSS should look like this:
.icon-napoleon,
.icon-napoleon svg {
width: 100%;
height: 100%;
}
Please note that parent element must have width and height defined. The only exception is when parent element is a block, than you do not need to set the width (it is 100% by default, still the height is required).
Related
I've noticed when I try to resize the container of a header image or video on Squarespace, it doesn't resize the video or image inside of it. For example, on https://forgwinnett.org it looks like the video is only taking up half of the landing screen but it's actually not - the video is still rending at 100% view width and height but I'm covering up half of it.
This kind of stinks and isn't specific to this particular template. I would love to know how to make the video/image responsive.
div[data-url-id="pledge"] div.title-desc-wrapper.over-image.has-main-image.has-background-video {
height: 55vh;
}
This resizes the video container, but the video or image doesn't resize with it.
The problem is that your <iframe> element inherits the following:
.sqs-video-background .background-video {
min-height: 100%;
...
}
This means that no matter what height value you specify, the minimum height of your <iframe> element must be at least 100% of the parent element... which itself is absolutely positioned and has a height of 100%, making it fill the entire page.
Based on your use of height: 55vh !important on your .title-desc-wrapper element, I can only assume that you're wanting your <iframe> element to have a 55vh height. To achieve that simply:
Reset the min-height from your <iframe> element to initial.
Add a height of 55vh to your <iframe> element.
Now depending on whether you want this to display behind your page <header> or not, you'll need to either offset your <iframe> element's height by the height of your <header> (using calc(55vh + ...)) or adjust the top property to push the <iframe> element down so that this no longer happens.
You'll end up with something which looks like this:
Your iframe is set to a specific width:
<iframe id="vimeoplayer" class="background-video ready" src="//player.vimeo.com/video/181653249?api=1&background=1" style="width: 2640px; height: 990px; left: -729px; top: 0px;"></iframe>
Note the style="width: 2640px; height: 990px; left: -729px; top: 0px;"
I note that the value for left changes when the screen size changes in order to center the iframe under the content.
You need to either:
Make the iframe the same width as the page (auto), or
Make one of the parent divs between the iframe and the video the same width as the page, and centered.
Use "iframe#vimeoplayer" as as selector to add your own css to affect video resizing.. Thanks
You need to append this style:
.sqs-video-background {
height: 61vh;
}
I am using ngDialog in AngularJS to create pop-up dialogs in my webapp. ngDialog provides CSS that contains a width parameter. If I override the paramater with width: initial, the block expands to be full-width. I would expect (and desire) it to take up the minimum size necessary to show its contents.
Here is a minimally working ngDialog exmaple on jsfiddle. Click on the text to open the dialog and see it expand to full-width.
How can I adjust the css so that the div is just large enough to fit its contents?
Becuase the css by default is:
.ngdialog.ngdialog-theme-plain .ngdialog-content {
max-width: 100%;
width: 450px;
}
If you override the width: 450px, then as a div - a block level element - it defaults to full width.
You can change it to display: inline-block to make it "just fit"
You can use css property display
display:table;
if you just want to show html table in ngDialog, this will work perfectly and will fit your table into it.
Make sure your table width!
In your JSFiddle, .ngDialog is attached to a div and doesn't overwrite it's CSS display: block; property, which is why box spans across the entire screen; it has nothing to do with the width property. Set .ngDialog to include display: inline-block; and remove any properties for width.
You can customize the ngDialog theme as below:
ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-mine,
scope: $scope
});
I copyed the "ngdialog-theme-default" block from ngDialog-theme-default.css to mine.css, then change "width" and rename it to "ngdialog-theme-mine".
It works.
With Bootstrap there is a CSS style container-fluid which we use in our app. The problem is, when the app loads I can see that the div which this CSS style is applied gets this:
element.style {
height: 322px;
}
However I tried to use Javascript to set the CSS height of container-fluid on app load, the height gets that size, which is actually the initial height of the browser. So the issue is that when I resize the browser there gets a white space that the background of the div which have this container-fluid property.
Use !important with that class styling and javascript won't take over this property.
For example:
#main {
height: 100% !important;
}
I know how to stretch background image to fit its container (with background-size property). But how to achieve the other way around without setting width and height manually?
To better make my point, assume we have a p element with one line of text and set its background-image to an picture of 800*600px. How to adjust the width and height of p automatically to 800*600?
I ask the question because I am looking for a better workflow. It's quite annoying to change width and height in CSS every time I change the image size in Photoshop. The workflow is like below:
Change image in Photoshop (likely end up with a slightly different image dimension)
Remember that new dimension
Go into CSS file looking for that particular element which uses that image as bg
Change width and height of the element (if i still remember them correctly..)
Instead of using a background image, you could use a img element and set the containing div's display to inline-block. You'd then need to create an inner div to wrap the content and position it absolutely relative to the containing div. Since the img is the only thing in the flow, the containing div will resize relative to the image.
Pretty much a hack, but I think it would give the effect you are looking for.
http://jsfiddle.net/Km3Fc/
HTML
<div class="wrap">
<img src="yourImg.jpg" />
<div class="content">
<!-- Your content here -->
</div>
</div>
CSS
.wrap {
display: inline-block;
position: relative;
}
.wrap img + .content {
position: absolute;
top: 0;
left: 0;
}
Your only option would be to programatically add the height/width. Compass for Sass has functions that can return the dimensions of the image when the CSS file is compiled: http://compass-style.org/reference/compass/helpers/image-dimensions/
.foo {
height: image-height('my-img.png');
width: image-width('my-img.png');
}
According to the documentation for CSS3 w3schools this should do it:
div {
background-size: contain; /* or cover */
}
EDIT: using javascript, you could load the image from the background-image property and set the size of the container.
(function() {
var img = new Image();
var $mydiv = $('#mydiv');
img.src = $mydiv.css('background-image').slice(4,-1);
$mydiv.width(img.width).height(img.height);
})();
I have an image that should stretch proportionally using only the HTML attributes. The default behaviour with no css set is that if the height attribute is set to half the natural height, then the width will automatically be half the natural width as well.
Example:
<img height="path/to/image.jpg" height="{half natural height}" />
The problem is that I am inheriting styles from an external library that i do not want to hack in that changes this behaviour.
I am trying to reverse the styles back to the browser default behaviour so that it would appear that the element has not been styled at all.
http://jsfiddle.net/23Hz4/2/
Failed attempts:
Setting width: auto; height: auto does not work. Setting width:
initial; height: initial does not work.
Setting element.style.width and element.style.height to null or empty strings does not work.
delete element.style.width and delete element.style.width does not
work
Any ideas?
You can make it works by using the style attribute instead of height
<img src="path/to/image.jpg" style="{height: half height};" />
The problem is the height: auto; css rule of bootstrap. The height attribute can't override this rule. So only a css rule can override this css rule.