Whatever the screen resolution recthangle renders 10cmx10cm on screen.
That means that if you take a ruler then you measure 10cmx10cm.
Can you do it with pure HTML and CSS or do you need javascript code also?
CSS actually supports centimeter units, just like pixels or percentages.
So you can just use :
#your-rectangle {
width: 10cm;
height: 10cm;
}
<hr style="border:1px red solid;width: 10cm;height: 10cm;">
<hr style="border:1px red solid;width: 10cm;height: 10cm;">
Related
I have multiple div with class called card. I need my all div to be same height and same width. I want to add images to those div. I have different images with different aspect ratios. Also I want whole image filled inside the div. (I want to prevent from cropped images). Therefore, If I can convert all images into same aspect ratio first, then it should be okay. Then I can set .card-img {width=100%}. Height should be same for all images because .card has same width and all images have same aspect ratio. How can I make this work as I mentioned?
<div class="card">
<img class="card-img" src="img-1.jpg" alt="" />
</div>
<div class="card">
<img class="card-img" src="img-2.jpg" alt="" />
</div>
<div class="card">
<img class="card-img" src="img-3.jpg" alt="" />
</div>
.card{
width: 270px
height: 400px;
}
Assume img-1.jpg, img-2.jpg, img-3.jpg has different aspect ratios.
You can't force an image to have a different aspect ratio from its natural one without either cropping or distorting it. You say you don't want to crop so that is not a possibility and you would be unlikely to want to distort it (stretch it in one direction or the other).
What you can do is make sure that the whole image is always visible is use contain instead of cover.
Obviously this means there will be space either at the top and bottom or at the sides of your cards in some cases but this is an inevitable consequence of the no-cropping requirement.
I have faced the same problem many a times. Unfortunately the only options we have available when height and width are fixed are:
Use object-fit: cover on the img element. This results in some cropping.
Use object-fit: contain on the img element. This ensures there is no cropping but adds whitespace around the image.
If you are okay with differing height and width, then you have the option to use a masonry layout as described here:
https://masonry.desandro.com/layout.html
Easy, just set max width and max height to 100% and let the browser sort it out.
.card {
width: 270px;
height: 400px;
border: 1px solid #333;
}
.card img {
max-width: 100%;
max-height: 100%;
}
<div class="card">
<img class="card-img" src="https://picsum.photos/370/400" alt="" />
</div>
<div class="card">
<img class="card-img" src="https://picsum.photos/400/100" alt="" />
</div>
<div class="card">
<img class="card-img" src="https://picsum.photos/400" alt="" />
</div>
This is in case you want the image element. If you want the image as a background, use the contain property.
UPDATE
If you want the images to fill the cells, use
.card img {
width: 100%;
height: 100%;
}
But this will stretch the image. These are the two options you have without cropping.
I want to embed this iframe into my webpage:
<iframe height="600px" width="600px" src="https://ionicabizau.github.io/github-profile-languages/api.html?damienAllonsius" frameborder="0"></iframe>
EDIT
I get this cool result but unfortunately the iframe is too big.
So how can I rescale it ? Let's say I want it 50% smaller.
When I change attributes height and width from 600 to 300, I get this result
How can I fix that ? Changing the width and heigh with a CSS class does not change the result. Any idea ?
Just apply CSS properties transform and transform-origin to the iframe:
transform will change the size of the whole DOM object tree (Also font size and so on)
transform-origin will specify that the resize should start from top left. Otherwise, it would resize from the center and the resized iframe would flow in the middle.
#frame {
border: 1px solid black;
transform: scale(0.5);
transform-origin: top left;
}
<iframe id="frame" src="http://google.at" frameborder="0"></iframe>
You may take one div and try to put iframe inside that div.
Apply width:50% to newly created div.
.container-wrapper {
width:50%;
}
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<div class="container-wrapper">
<iframe src="https://ionicabizau.github.io/github-profile-languages/" height="100%" width="100%">
</iframe>
</div>
</body>
</html>
Your iframe content should be responsive enough to display.
I have a webpage with a canvas for implementing graphics rendering, and would like to align some text and buttons to the left of it. My HTML code is as follows:
<body onload="webGLStart();">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</body>
So what I want to align to the left is everything in the 'controls' class. Currently it is being displayed below the canvas on a new line. I want it to be aligned to the left starting on the same line as the canvas, with the canvas remaining centered.
I am using a stylesheet and would like to know how to implement this using css.
My site can be seen here. It is the Controls section I want to move up towards the top of the page.
Any help would be much appreciated, thank you.
I would suggest you wrap it all in a wrapper div which is centered and has position relative. Then you can position the controls absolute like this:
<div class="wrapper" style="margin: 0 auto; width: 800px; position: relative;">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls" style="position: absolute; top:0; left:0;">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</div>
Here is a makeshift answer. I would use bootstrap for positioning though.
You can use bootstrap.
JSFiddle
is that what you are looking for? use col-sm-{x/12} to size and resize your positions.
in my web page , I need to display the google map. But my web page also contains canvas elements.
Now if I make the z:index of canvas higher than map I cannot zoom in or pan to left/right.
If i make the z:index of map higher than canvas element,it covers the whole of page as a result i can not see the triangle drawn through the canvas.
I used the css property pointer-events:none; but it only works properly in chrome,and in Mozilla (to good extent). But IE (10) is not using supporting it.
How do I achieve the same .i.e zoom and pan in IE as well.
This is the hmtl part
<section id="intro3" data-navigation-tag="Plan" style="display: block; background-position: 50% 44.866px;">
<canvas id="amenitycanvas" style="display:none;z-index:2;pointer-events:none;"></canvas>
<div id="link" style="position:absolute;">
LOCATION<br>
</div>
<div class="image-display" id="displaylocate" style=" width:100%; height:100%;right:0%;top:0%;position:absolute;display:none;z-index:1;">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.co.in/maps?t=m&q=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu&ie=UTF8&hq=&hnear=Vaikunthlal+Mehta+Rd,+Nehru+Nagar,+Airport+Area,+Juhu,+Mumbai,+Mumbai+Suburban,+Maharashtra&z=14&ll=19.104093,72.840396&output=embed"></iframe><br /><small>View in Google Map</small>
</div>
</section>
and the javascript
function HideAndShowFunc(name)
{
if(name=="LOCATION")
{
$("#intro3canvas").hide();
$("#intro3logo50").hide();
$("#essence-luxury").hide();
$("#displayamenity").hide();
$("#projlogodiv").hide();
$("#link").hide();
$("#intro3Ongoing").hide();
$("#intro3Upgoing").hide();
$("#intro3Completed").hide();
$("#arrow").hide();
$("#table-frame").hide();
$("#intro3bg").hide();
$("#amenitycanvas").show();
$("#displaylocate").show();
}
}
You should try Hand.js. It's polyfill for pointer-events and this article might be help you to use Hand.js
I have an href image in this markup.
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="http://image.com/image.jpg" width="100" height="100">
</a>
</div>
When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?
My CSS looks like this but it still doesn't work
a.imga:hover {
background-image: url('over.png');
background-position: top;
z-index:3;
}
**Here is the solution you can try**
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
</a>
</div>
Use can do it with CSS, but insted of img tag use a DIV with a background image
<div id="image"></div>
CSS style
#image{
width: 100px; //Image height
height: 100px; //Image width
background: url('') 0 0 no-repeat; //Give your image path here
}
#image:hover{
background: url('') 0 0 no-repeat;
}
Try CSS Sprites, check out this screen-cast from css-tricks.com on how to use them.
You can use :hover pseduo selector on the div with class imgdiv with background-position set appropriately to show on the top right corner. Off course, you should apply background-image to the div first.
Note that :hover does not work in IE6 for anything other than links. However, you can overcome this limitation by using javascript/jquery.