Is there a way to set an image width to 100% of its parent?
At the minute I'm using Enhanced Image with a nicely styled figure tag for captions, but until the image fits the width of the figure it's pretty much useless!
Thanks!
Add this in your CSS file:
img {
max-width: 100%;
height: auto !important;
}
Or, try this gist.
After trying for so long I got a manual solution for making the image responsive in the CKEditor Django. After a adding the image in editor, put "style width:100%" manual in Image Properties
This work in my case but we have to manually add this field.
Thank you for providing details and sorry for late reply.
In order to make the image 100% width of the figure please open ckeditor\contents.css file, find the selector for figure element and remove the padding: 10px; declaration. Next refresh your page and you should be good to go.
Related
I'm trying to align horizontally two images that are next to each other with different dynamic text under it. If you review the image I attached it's pretty clear what I'm trying to do. I don't think flexbox properties like flex-end or flex justify-content: space-between will work here. Thanks for your help in advance.
https://i.stack.imgur.com/QYCMh.jpg
enter image description here
So I figured out a solution. I used calc() to achieve the results
position: absolute;
width: calc(100% - 50px);
margin-top: calc(112.1% - 980px / 25);
This calc keeps the image stuck to the image next to it. Not sure what the unit numbers mean, I basically fiddled with the units until I got the results I wanted.
Heres the result https://gifyu.com/image/vnPX
I'm trying to set the background with the fixed property but I can not do it.
My code:
.background-page {
Background: linear-gradient (to right bottom, # 2f3441 50%, # 212531 50%);
Position: fixed;
}
Obviously it is wrong, but I do not know how to solve it.
Regards, thank you.
You should be using the background-fixed property. But because fullPage.js uses by default css3 transformations when possible, you'll get some problems with some browsers which are buggy on this respect. See this topic
The solution to it is using the options css3:false or scrollBar:true in fullPage.js:
when I am using LinkManager on an inserted image, a blue border starts coming around the images. Can some body help me to remove this border?
This is a default behavior of IE inside the editable iframe elements, which can be customized via the following CSS rule:
a img
{
border: none;
}
Put the class in a CSS file and load it through the CssFiles property of RadEditor. It will clear all borders shown for images inside an tag.
Best regards,
Rumen Jekov
I'm trying to make a special floating text around an image. It has to look like this
Open image here
Text can vary in size. Image has a fixed size.
How do we set this up in CSS? Is it even possible?
I'll take a scripted solution if there is one (all though I can't see anything helpfull in that department myself...)
Thanks a lot in advance :-)
Jan
You just need to float: right your image:
img { float:right; }
DEMO
Here's a fiddle showing how to do it: http://jsfiddle.net/4q3um/
img {
float:right;
margin:0 0 20px 20px;
width:100px;
}
MediaWiki pictures can be set to a certain size with simple formatting.
However, tables will resize on the fly depending on the browser / screen size.
Can images be made to resize like tables?
(Images inside tables does not work!)
I had the same question and saw from the answers above (now they are below) that you cannot have several pics with different relative sizes. So I wrote a mediawiki extension allowing this: http://mediawiki.org/wiki/Extension:AdaptiveThumb
Dynamic resizing as the browser is resized:
Put the next line at the begining of the css file: .\skins\common\shared.css
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
Each resizable image will be placed inside a <div></div>
<div>[[Image:MyImage.png]]</div>
Read more here: http://www.mediawiki.org/wiki/Help_talk:Images
You could set up a CSS hack.
Mediawiki allows you to include some variables like alt-text, including in that variable a special string such as w100 or resizeable will allow you to target the element with CSS:
img[alt=~w100] { width: 100% !important; height: auto !important; }
Do note that since you are using alt for things it's not meant to be used and !important in the CSS (because MW sets the size as an element style), this is to be avoided as much as possible and meant to be used as last resort.
In short, no, there is no easy way to do this. It could conceivably be done with a bunch of fiddly Javascript, but I'm not aware of anybody having tried this and the implementation would not be trivial.
The short answer is no. The long answer is that you would have to write JavaScript that can determine the user's screen resolution and store it in a cookie.. This would have to be done most likely in common.js so that with the exception of the one in a billion user that has never been to the site and manages to navigate directly to the page with the dynamically sized image (I hope you're not going to put something like that on your main page), that information will already be there when they get to the page. The page could then use those variables to set the size to be {{#expr:(File height * % of screen you want it to take)*(screen height)}}x{{#expr:(File width * % of screen you want it to take)*(screen width)}}px. The host of my wiki says he is in the process of writing a new extension that may be able to do that as part of a request for a <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> section I want to make. If you find something else before me, please update this post so I can see it. Thanks. :D