I'm using this library to make QR codes.
I'm trying to give the qrcode a width of 100%. I've tried using style="width: 100% !important;" like I would on images, but it doesn't worked.
(codepen Reference Here)
Any ideas?
Hi refer add css for image:
#qrcode img{
width: 100%;
}
On your codepen it work with width 100% on the image
img {width: 100%; height: auto;}
Related
I've build an ad with an click tag. Everything works fine - the images are scaling proportionally but is there a way for the container not to fill 100% of width/height and still be scaling?
Preview:
https://craftads.de/hosting/stack_test5/
Wetransfer Code:
https://wetransfer.com/downloads/5b7b21ccd2a0f535cfcb22146ae5e41b20210823135155/edf6cd
I would like that only the visible part to be clickable.
Visual representation:
This is what I would like to achieve
Thanks for the help!
After a lot of trial and error I think I've found a solution:
html, body {
width: 100%;
height: 100vh;
margin: 0px;
max-width: 50vh;
min-width: 500px;
min-height: 1000px;}
Does that make any sense haha?
I have been trying to change the width and height of my Codemirror editor using CSS but it does not seem to have any effect.
.CodeMirror {
width: 500px;
height: 1000px;
}
Instead of resizing accordingly it remains at a height of 300px and full width.
Nevertheless I am still able to set width and height via code: editor.setSize(500, 1000);
What am I doing wrong?
Have you tried.
.CodeMirror {
max-width: 500px;
max-height: 1000px;
width: 100%;
height: 100%;
}
Try using percentages.
Also CodeMirror docs specifically say you should use width: auto and height: auto to auto scale. just fyi.
Make sure to import your own CSS file after the default stylesheets of Codemirror. Otherwise the defaults do not get overridden properly. Simply import your stylesheet last.
I'm trying to make that 1 image take 50% height and 100% width of the screen and the second picture to the same.
Look at the picture below:
http://imgur.com/f4iJ2k6
You should be able to accomplish this using css.
body{
width: 100%;
height: 100%
}
img{
width: 100%
height: 50%
}
Note that, for some reason, you have to set the body to 100% width and height
I have an image slider. It is 100% wide and it's height is 400px. I'd like my picture which are always bigger than the slider (f.e.: 2500*1250 etc...) to fit properly in my slider. How can I do that? with a jquery script dinamically?
My code:
#slider {
width: 100%;
height: 400px;
position: absolute;
overflow: hidden;
}
--My ID's for the images displayed in the slider.--
#first {
}
#second {
}
#third {
}
Try this way for img in slider :
#first img,#second img,#third img {
position :relative;
width:100%;
height:auto;
}
you no need to write jquery for that change your css like this
#first img {
width:2500px;
height:1250px;
position :relative;
overflow: hidden;
}
use same as the other image ID, but I think it's better use one class for all, because in a slider need all images are same size
Neither work. I've seen somewhere a guy who posted a js for this but I could not find that thread that's why I posted.
I was trying to figure out what is the best, if it can be done, and desired method to take an image that is uploaded and trim the image for a thumb in CSS. If it cannot be done in pure CSS what is the method to do it in JavaScript/jQuery? The images may be different sizes but I am looking for a way that an image will square on center, and then reduce to fit. Example below:
This image is 413 x 300.
If this image was trimmed from the left and right for the portfolio thumb it would be 300 X 300:
Then the image needs to be reduced for the thumb 200 x 200 or what ever value the thumb is set to display:
EDIT
my understanding if #img_preview{width:200px;} is applied it would result in this:
example here:
http://jsfiddle.net/cnWqQ/5/
css like this:
#img-wrap{
height:200px;
width: 200px;
background-image: url('http://i.stack.imgur.com/yQ1j8.jpg');
background-size: cover;
background-position:center;
}
html like so:
<div id="img-wrap"></div>
Works by putting the images as the background in a div, works for all image shapes and sizes consistently.
it involves some css3.
You can do it in CSS, but it will only work with modern browsers :
You'll use background-image property :
<div id="myImageTrimed">
</div>
and the css :
#myImageTrimed {
background-image: url('img/youImage.jpg');
background-position: center; /* to make sure it trims the borders */
background-size: cover; /* As large as possible */
height: 200px; /* But only 200x200px are shown */
width: 200px;
}
Please comment if you have more browser constraints.
Just set the CSS width to the value you need, the height will be automatically adjusted to maintain the aspect ratio.
#img_preview{
width:200px;
}
You can mask the image with a div:
Your div:
height:200px;
width:200px;
overflow: hidden;
Your image:
position:absolute;
height:inherit;
margin-left:-15%;
see this demo below: http://jsfiddle.net/jRCgP/