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
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 tried everything using css that i can think of , and set with in the embed , but i cant not get it to width more then 500px
https://jsfiddle.net/9d73rhvj/
<a class="twitter-timeline" data-widget-id="694535126655635456" href="https://twitter.com/TwitterDev" width="1300" height="750">Tweets by #PTDcommish</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
CSS i've tried
#twitter-widget-0 {
width: 100% !important;
}
.twitter-timeline-rendered {
width: 100% !important;
}
iframe[id^='twitter-widget-']{
width:100%;
}
.twitter-timeline {
width: 100% !important;
}
Twitter has set a maximum width for embedded timelines to 520px, which my guess is as why your solutions aren't working.
From their docs (link):
Dimensions
An embedded timeline list template automatically adjusts to
the width of its parent element with a minimum width of 180 pixels and
a maximum width of 520 pixels.
i have this website, and as you can see on the index page that we have a 80% width and 100% container and in it a picture. Now there is a problem with different images and their resolutions, some are stretched some are narrow.
I want the pic to be full screen size and 80% width and to have proper aspect ratio. I would probably need some javascript to crop the images? please i need some insights on how to do that. Also a slider can do the trick if it has cropping feature and the possibility of 80% width and 100% height
here is the url
http://tinyurl.com/otwocvz
try removing the image and add the image as header2 background.
.header2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: #CCC;
display: block;
background: url(http://leowd.com/wp-content/uploads/2014/08/leowd-umbrella-red2.jpg) no-repeat center center fixed;
background-size: cover; }
I've created a web application where you can draw an image. When you print the the website, there should only be the image, and it should use as much space as possible on one page.
My problem: if the image is much higher than wide, it still uses the full width and the lower edge is cut off or is on a second page! Firefox also cuts off about 2% of the image at the right edge. How can I solve this problem using css? Or is this only possible with JavaScript?
#media print {
#content {
display:none;
}
#canvas {
position:absolute;
max-width:100%;
max-height:100%;
margin:0px;
}
}
Here's my JSFiddle: http://jsfiddle.net/Gh28n/6/
The trick is to set a fixed with so large it can fit any paper, and set the max-width to 100% so it will always be scaled down, and height to auto to maintain the aspect ratio, like so:
#canvas {
width: 9999em;
max-width: 100%;
max-height: 100%;
height: auto;
}
As for the clipping on the edge, removing the position: absolute fixed it.
edit: added max-height: 100%;
EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/