On my website, I was trying to make the size of an iframe be the same on all resolutions / screen sizes.
A Iframe on my website: Website
View source of the page: View-source
I tried this code;
<p align="center"><iframe src="" style="width: 50%; height: 50%; border: 0px; border-radius: 0px; margin-top: 20px;" id="iframe" class="myIframe"></iframe></p>
<script type="text/javascript" language="javascript">
$('.myIframe').css('height', $(window).height()+'px');
</script>
although it didn't really help me that much as the size didn't work.
This code sets the width and height of the iframe to be equal to the size of the viewport when the page loads, and whenever the window is resized.
<p align="center">
<iframe src="" style="border: 0px; border-radius: 0px; margin-top: 20px;" id="iframe" class="myIframe"></iframe>
</p>
<script type="text/javascript">
const iframe = document.querySelector('.myIframe');
function setIframeSize() {
iframe.style.width = window.innerWidth + 'px';
iframe.style.height = window.innerHeight + 'px';
}
setIframeSize();
window.addEventListener('resize', setIframeSize);
</script>
I would use flexbox. Set the body element to be flex and the p tag. Set the p tag to flex 1 and html and body tags to 100% height and width. It will expand to fill the screen space. You also dont need the border div, just set the background color on the text div itself.
<html style="
height: 100%;
width: 100%;
"><head><link rel="icon" type="image/x-icon" href="/images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<meta charset="UTF-8">
<title>Classes</title>
</head><body style="background-color: #001b2e;display: flex;height: 100%;width: 100%;margin: 0;">
<div class="text">
<embed src="/dump/text.html">
</div><p align="center" style="
flex: 1;
display: flex;
padding-right: 24px;
"><iframe src="https://mathplayground.com/drift-boss-v3/index.html" id="iframe" height="100%" width="100%"></iframe></p>
</body></html>
Related
I am new to SVG apologies! I am having an issue with an SVG where I have it set to max-width: 60% but it seems to take precedence over the overall height of the elements.
I want it so the overall height of the row is 50vh. But even if I set it and remove the max-width from the SVG it still is taking precedence over the set vh. If anyone has any suggestions on the best way to approach this?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="safetyFreelancer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<style>
body {
background: #f3f4f5;
}
.wave-container {
position: relative;
background: #ce1212;
color: #FFF;
text-align: center;
overflow: hidden;
}
.wave-container > svg {
display: block;
background: #ce1212;
}
.vh {
height: 50vh !important;
}
</style>
</head>
<body>
<div class="wave-container">
<div class="row vh">
<div class="col-md-6">
<h1 class="text-center">Welcome</h1>
</div>
<div class="col-md-6">
SVG
</div>
</div>
SVG
</div>
</body>
</html>
I did not enter the SVGs as it maxes out the character count
If I undestood correclty you want to set width for your svg. If yes, then you can just set through this new rule:
.col-md-6.test > svg {
width: 50%;
}
The jsfiddle example can be seen here.
I want to make a fixed size of <div> with images in it.
I have this jsp part (if needed more, I will add)
<html>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="carousel-inner">
<div class="carousel-item active">
<img style="margin-top: 5px; max-width: 350px; max-height: 200px; display:block; margin-left: auto;
margin-right: auto" src="img/${i.imageURLs.get(0)}" height="200" width="350">
</div>
<c:forEach var="img" items="${i.imageURLs}">
<c:if test="${img != i.imageURLs.get(0)}">
<div class="carousel-item">
<img style="margin-top: 5px; max-width: 350px; max-height: 200px; display: block; margin-left: auto;
margin-right: auto" src="img/${img}" height="200" width="350">
</div>
</c:if>
</c:forEach>
</div>
</body>
</html>
CSS is
img {
width: auto;
height: auto;
margin-bottom: auto;
margin-top: auto;
}
It is the representation of jsp page with the image URLs collection inside of it. The problem is that pictures with not proper height make my div's height less and all the square becomes smaller (at least, proportions are fine).
How to set the <img> style properly to center them vetically, or make the bottom margins dynamic depending on image's height?
Without width: auto; height: auto; there's no needed result so I supposed to use both styles from <img> and CSS.
As chriskirknielsen said, the object-fit: contain and setting the max-height: 200px to height: 200px had made the expected behaviour.
You can do this.
.image-parent {
height: 200px;
display: flex;
align-items: center;
}
.img {
max-width: 100%;
height: auto;
}
I fixed parent on 200px so that every parent will be same height.
align-items: center; will center content of the parent on vertical axis which should solve your problem
I also added max-width: 100%`` andheight: autofor images to make them responsive. For this you can use bootstrap4 classimg-fluidor bootstrap3img-responsive```
You can
On the image tag, Add alignment to be center
<img style="margin-top: 5px; **align: center;** max-width: 350px; max-height: 200px; display:block; margin-left: auto;
margin-right: auto" src="img/${i.imageURLs.get(0)}" height="200" width="350" >
I have an index.html markup as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
To apply styles, I use main.css whose content is as follows:
#pagecontent {
border: none;
height: 100%;
width: 100%;
}
The width of the iframe is assigned correctly. That is, when I resize the browser window, the width of the iframe is adjusted accordingly. However, the height is always the same. It is about 300px and does not expand to the height of the browser window. I tried this in FF 45 and IE 11.
Question: What is the reason for the height not being adjusted in the same way as the width when applied to the iframe?
You have height set to 100% but 100% of what? It's always the parent of that element so what is the parent's height set to? If it's not set to anything then the browser has nothing to reference.
So you have to give height in px here
#pagecontent {
border: none;
height: 400px;
width: 100%;
}
working example : https://jsfiddle.net/uxq4pzc1/
#pagecontent {
border: none;
height: 100vh;
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>
iframes by default are inline so try line-height instead or use display: block Also 100% of what? 100% of whatever contains the iframe so you should wrap iframe in an element and set a height explicitly.
Whenever I use an iframe, I wrap it in a block level element and set position: relative. Then I place position: absolute top:0; bottom:0; right: 0; left: 0; on the iframe. Whenever you want control over the iframe, use it's parent instead.
See this post for details
#pagecontent {
border: none;
height: 100%;
width: 100%;
display: block;
}
.box {
height: 20em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<div class="box">
<iframe id="pagecontent" src="http://example.com"></iframe>
</div>
<footer>...</footer>
</body>
</html>
I am needing to center my image using css. I am having troubles, and cannot find out how to do it.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<title>
AG.
</title>
<body>
<img src="images/logo.png" alt="AG" class="logo">
</body>
</html>
CSS
.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
}
You can't center an inline element that way - you need to give it a display: block style:
.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
display: block;
}
<img src="http://placehold.it/500/467" alt="AG" class="logo">
To wrap the image into a div,
change the html and add an ID like so: (By the way, I used a google image as a place holder, but you get the idea)
<div id="pic">
<img src="https://www.google.com/logos/doodles/2014/jonas-salks-100th-birthday-5130655667060736-hp.jpg" alt="AG" class="logo">
</div>
and then for the CSS
#pic {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
See it work at http://jsfiddle.net/e5pdof91/
}
First put your image inside a container, otherwise the height and width are just editing the size of the picture.
I added it into a div and then added the properties into its own container.
http://codepen.io/anon/pen/uHaGC
Here is a code pen.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<title>
AG.
</title>
<body>
<div id="logo">
<img src="images/logo.png" alt="AG">
</div>
</body>
</html>
#logo {
position: relative;
width: 50%;
margin-left: auto;
margin-right: auto;
}
The #logo tag centers it (maybe not depending on your resolution). Just set a new tag for your image and change the size!
I prefer using percentages rather than amount of pixels because it then looks better on bigger or smaller resolutions.
My result: http://i.imgur.com/P50RS.png
My style.css
body {
background: url("img/bgs.png") repeat #cccccc;
color: #000000;
}
main {
margin-left: auto;
margin-right: auto;
}
My index.html
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" href="css3-progress-bar.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p><b>215/160 LBS.</b></p>
<div class="bar_mortice rounded green_mortice">
<div class="progress rounded green" style="width: 05%;"></div>
</div>
</div>
</body>
</html>
Why is the text not centering? Also, the progress bar was not centering until I added the
margin: 0 auto;
I tried that under main but no luck. Any ideas?
In the css, you need to use #main instead of just main.
Also, you'll want to give it some width, otherwise it may take up the entire width. Try this:
#main {
margin-left: auto;
margin-right: auto;
width: 50%;
}