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" >
Related
Essentially, I've trying to get my navbar to float above the main content of the page without creating a new block. The box in the centre is a modal/popup, and the background is a map API (Leaflet) and it's all for a project I need to complete.
#mapid {
width: auto;
height: 100vh;
z-index: 1;
}
#navbar {
z-index: 2;
position: absolute;
margin-left: auto;
margin-right: auto;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gazetteer</title>
<!--Bootstrap Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!--My Stylesheet-->
<link rel="stylesheet" href="libs\css\styles.css" />
<!--Leaflet's Stylesheet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
</head>
<body>
<!--Preloader-->
<div id="preloader"></div>
<div id="navbar">
<label for="countrySelect">Select a country from the list:</label>
<select name="countrySelect" id="countrySelect"></select>
</div>
<!--Map-->
<div id="mapid"></div>
<!--Scripts-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--My Scripts-->
<script src="libs\javascript\script.js"></script>
</body>
I've tried display: fixed, absolute, flex, inline-flex, a series of margin-left: auto, etc. Either I've missed something or I've gotten horribly confused XD
I've popped it onto its own z-index to not disturb the map functions but yeah, the best I've been able to achieve is a container that sits above the main content but isn't centred and won't necessarily respond to any changes I make in the height and widths arguments.
For context, I am the original author of this question.
I created a div element with a class of .mainContainer
.mainContainer {
position: relative;
}
Then I created another div element as a child of the main div with an id of #nav (as in this case I needed a navbar to be centred)
#nav {
position: absolute;
left: 0;
right: 0;
top: 10%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
max-width: 400px;
text-align: center;
padding: 10px;
z-index: 5;
background-color: #AD8350;
box-shadow: 7px 7px 0px 2px #2A1A1F;
}
margin-left: auto and margin-right: auto are what centred the element.
Code sandbox:
https://codesandbox.io/s/polished-browser-d5qrr?file=/index.html:0-1902&fbclid=IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH-4UB8QIbPdb_hZKL1G0
How to fill image to 100% height of the parent div? Ratio width: height should stay the same.
Here is a possible solution for your question I hope it can help
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<style>
html,
body {
height: 100%;
}
.custom-container {
position: relative;
max-width: 800px;
max-height: 400px;
width: 70%;
height: 60%;
border: 2px solid red;
}
.mid {
border: 2px solid green;
}
.flex-grow-1 {
position: relative;
min-height: 100px;
max-height: 100%;
}
.img-container {
position: relative;
height: 100%;
}
.flex-grow-1,
.img-container,
img {
width: 100%;
max-height: 300px;
object-fit: cover;
}
div>img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1">
<div class="img-container">
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1"
alt="img" />
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
You want the img to fill the height of its container which has class .img-container.
At the moment you have set the width and height of the img element to 100px. This gives a small image and one that may be distorted if the original is not square.
To make the image fill the full height but keep its original aspect ratio replace the .img-container img CSS settings with:
.img-container img {
height: 100%;
width: auto;
}
This may not be what you want if some of your images are more landscape than portrait for example. Depending on the image aspect ratios compared to the container's you may get the image cut off at the sides.
If you want to ensure that you always show exactly the whole image then investigate object-fit: contain This may give you white space either top and bottom or at the sides if the ratios don't match.
If you want to always fill the container, but without image distorion then investigate object-fit: cover. This will cut off top and bottom or the sides if it has to. You will need also to look at positioning, often center will do what is needed but may not work for all your images.
This is correct answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
html,body{
height: 100%;
}
.custom-container{
max-width:800px;
max-height:400px;
width:70%;
height:60%;
border: 2px solid red;
}
.mid{
border:2px solid green;
min-height:0;
}
img{
max-height:100%;
max-width: 100%;;
}
#problem{
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1 d-flex">
<div id="problem" class="w-100" >
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1" alt="img">
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I am currently creating a web-page where popup boxes are opening with dynamic content.
The popup itself should be maximal 98% height of the window -> no content goes on small devices in the overflow.
The content can consist of different elements which are floating and their width is managed by bootstrap columns. Their height should be given by their content, but not exceed the height of the popup. These content boxes can float under each other depending on screensize.
Due to the fact that all content is dynamic and therefore the heights are unknown until all is rendered, there could be scrollbars in almost every box.
html,
body {
float: left;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: "Roboto Condensed", sans-serif;
overflow-x: hidden;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="responsive.css">
<!-- Favicon -->
</head>
<body>
<div id="wrapper" style="height: 100%; width; 100%">
<!-- simple full size wrapper -->
<div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">
<!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window -->
<div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->
<div id="leftContent" class="col-sm-12" style="background-color: red;">
<!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>
<div id="rightContent" class="col-sm-6" style="height: 100%; background-color: green; overflow: auto;">
<!-- rightContent - can be small, but max 100% of height, then scrollbar -->
<div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>
<!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->
</div>
</div>
<div>
</div>
</body>
</html>
The example code is only working, when you add a specific height to #dynamicPopup (for ex. 400px).
Is there any way to solve this only with CSS and HTML?
your #wrapper must have position: fixed; so it's height is relative to window not the body. then #dynamicPopup gonna work the way you expect. this is how popups (modals) work.
here's a good example of what you're trying to achieve:
https://codepen.io/jzilg/pen/vEmQrm
and I have no idea why you have floated your html and body. I've never seen something like this before. try to avoid it.
html,
body {
margin: 0px;
padding: 0px;
font-family: "Roboto Condensed", sans-serif;
overflow-x: hidden;
}
#wrapper {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="responsive.css">
<!-- Favicon -->
</head>
<body>
<div id="wrapper" style="height: 100%; width; 100%">
<!-- simple full size wrapper -->
<div id="dynamicPopup" style="max-height: 98%; background-color: yellow; overflow: auto;" class="clearfix">
<!-- dynamicPopup - its height depends of content, max height should not exceed 98% of window -->
<div id="popupContentWrapper" style="height: 100%; width: 100%"><!-- popupContentWrapper - keeping all popupContents together -->
<div id="leftContent" class="col-sm-12" style="height: 49vh; overflow: auto; background-color: red;">
<!-- leftContent - can be small, but max 100% of height -->FOO</br></br></br></br></br></br></br></br></br></br></br></div>
<div id="rightContent" class="col-sm-6" style="height: 49vh; background-color: green; overflow: auto;">
<!-- rightContent - can be small, but max 100% of height, then scrollbar -->
<div id="rightInnerContent" style="width: 100%; height: 2000px; background-color: green;">BAR</div>
<!-- rightInnerContent -in this case a very long list which should be create a scrollbar in parent/rightContent -->
</div>
</div>
<div>
</div>
</body>
</html>
I'm still so stuck on this issue with my CMS and how to make it so that a user can drag an image of any size into a column/row (bootstrap) and it will responsively scale to fit.
First of all, this isn't for a website but it's a CMS where users create static pages that will show on digital displays so there is no scrolling at all. There is a banner (header) and a ticker/footer as the top and bottom rows, then the middle row has the main column where the images will sit. So no matter what, the images dragged into that area need to scale to fit so that the image remains in the column area which remains between the header and footer.
Currently, I can drag an image of reasonable size in and it sits fine but if I put a huge image in there it totally breaks the middle row/column AND breaks past the footer as well, as opposed to scaling down to fit. it should be responsive as much as possible while fitting in the bounds. Examples of those two:
Large placeholder image breaking the column
So in the images, the red area is the bootstrap column/row in question that the image is breaking. The 2nd image shows a 2000x2000 placeholder breaking out of the area and beyond the bottom row with the ticker. IN both images, the dark grey bars are the top and bottom rows.
Again, no matter what size image the user drags into this area and saves, regardless of what display it shows on it should always show the top and bottom rows, with a column in the middle of them with a scaled image.
My code is below
How exactly can I rectify this so that I don't have to worry about users dragging massive images into an area and they won't display properly once saved?
<style type="text/css">
#import "style.css";
html,
body {
height: 100%;
width:100%;
overflow: hidden;
}
.middle iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
img{
max-width: 100%;
height: auto;
}
.fullContent > img{
max-width: 100%;
height: auto;
}
.topLeftContent > img{
max-width: 100%;
height: auto;
}
.bottomLeftContent > img{
max-width: 100%;
height: auto;
}
.rightContent > img{
max-width: 100%;
height: auto;
}
.leftContent > img{
max-width: 100%;
height: auto;
}
.topRightContent > img{
max-width: 100%;
height: auto;
}
.bottomRightContent > img{
max-width: 100%;
height: auto;
}
.modal-lg {
max-width: 80% !important;
}
.my-container {
display: flex;
flex-direction: column;
height: 100vh;
width:100%;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899 ;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding:30px;
background-image: url('images/bg6.jpg');
background-size: cover;
}
</style>
<div class="row top">
<div class="row">
<div class="col-lg-12" style="background-color:grey">
<div class="row" style="background-color: #929292;">
TOP
</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 15px;">
<p>(Content must fit within bounds of dotted border)</p>
</div>
<div class="row middle" id="background">
<form><input type="hidden" name="panel" value="background"></form>
<div class="col-lg-12 fullWidth" id="full">
<form><input type="hidden" name="panelFull" value="full"></form>
<div class="fullContent" style="background-color: red; height: 100%; border: dotted 1px black;">
<img src="https://via.placeholder.com/2000">
</div>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12" style="background-color:grey">
<div class="marquee"><h2>Ticker</h2></div>
</div>
</div>
if you are using bootstrap, its so easy
<div class="row">
<div class="col-12">
<img class="img-fluid" src="YOUR_IMG_SRC">
</div>
</div>
Here is the template, you can use and edit as per your requirements
<!doctype html>
<html lang="en">
<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.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style type="text/css">
body{background-color: #e8eef0;}
</style>
<title>Main</title>
</head>
<body>
<header class="bg-light">
<div class="container">
<h3 class="text-center py-3">Header Section</h3>
</div>
</header>
<div class="row w-100">
<div class="container">
<div class="border border-danger p-5">
<h6 class="text-center">Main Image Section</h6>
</div>
</div>
</div>
<footer class="bg-dark">
<div class="container">
<h5 class="text-center py-3 text-white">Footer Section</h5>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- CDN Link for jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- CDN Link for popperjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<!-- CDN Link for Bootstrapjs -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</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.