This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 3 years ago.
Hi I have a div which is my nav bar, when I want to place my logos in the nav bar.
Code
<div class="first_bar">
<img class="home" src="../../assets/Home Unclicked-01.png">
<img class="energy" src = "../../assets/Enerygy panel Unclicked-01.png">
</div>
.first_bar{
background-color: #cdf7fb;
height: 52px;
}
.home {
width: 30px;
height: 30px;
}
.energy {
width: 30px;
height: 30px;
}
I am taking this as my reference and want to create something like this.
I am not able to put my icons as shown in the image above, how to size the icons do that it looks like the above.
sample image -
can some one help me with this?
Thanks.
followed the answer given,
it looks like,
how to get the spacing around my logos,as shown in the first picture?
You can try to convert your images into divs and set height: 100%; and width: 105px; for divs and size your images whatever you want like this:
HTML:
<div class="first_bar">
<div class="image-item">
<img class="home" src="en.png">
</div>
<div class="image-item">
<img class="energy" src = "en.png">
</div>
</div>
CSS:
.first_bar{
background-color: #cdf7fb;
height: 52px;
}
.image-item {
width: 105px;
height: 100%;
display: flex;
align-content: center;
}
.home {
/*Your custom height and width for this image*/
}
.energy {
/*Your custom height and width for this image*/
}
EDIT: Increase or degrease your image sizes with percentage. For example your home icon you can change the height from 130px to 105px and calculate the width depended from decreased percent, in this case, it can be 131.6px.
For calculations, you can use online calculators like this one: https://percentagecalculator.net/
Related
I am trying to display a map on a container. I successfully display it when setting its size to a specific amount of px.
However, I want the height to adapt to the container size.
In order to do that, I had to set the height of every parents of the map container. Once done, the map appear "shadowed" and is not clickable, just as it was behind something. I can only zoom in and out.
HTML :
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="mapid"></div>
</div>
<div class="col-2" id="selection">
//
</div>
</div>
</div>
CSS:
body {
padding-top: 65px;
margin: 0;
}
html, body, div {
height: 100%;
width: 100%;
}
#mapid {
height: 100%;
width: 100%;
align-self: center;
}
The result:
The culprit is most probably:
div {
height: 100%;
width: 100%;
}
...which looks to enlarge the Leaflet attribution control over your map container as well.
This explains the "shadow" effect and loss of interactivity.
Avoid such general selector for such layout styling.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have 4 images in a container. When I set the images to occupy 50% of the container, 2 stacks on top and 2 stacks on the bottom and it perfectly matches the edge on the container like I want. The problem occurs when I add margin. The images stack in one line meaning the margin made in too big for the container so they stack in one line
So I begin experimenting with decimals
I made the width of the images 49.5% and I set margin-right to 0.5%. The problem is the images on the right don't align with the container edge perfectly. There is still space on the edge and I cant add any more margin or width or else it stacks in one line because I am over 50%. Look at the blue part in the image.
My question I guess is how do I get the images to fit my container accurately. am I using the wrong units?
Picture of what I am talking about
.section1{
width: 100%;
height: 95vh;
background-color:;
}
.section1 .wrapper{
width: 94%;
height: 600px;
background-color: royalblue;
}
.section1 .card{
float: left;
width: 49.47%;
height: 300px;
margin-right: 0.53%;
color:white;
}
.pizza{
background: url(./img/main\ 1.jpg)no-repeat;
width:100%;
height: 100%
}
.burger{
background: url(./img/main\ 2.jpg)no-repeat;
width: 100%;
height:100%;
}
.pasta{
background: url(./img/main\ 3.jpg)no-repeat;
width: 100%;
height: 100%
}
.salad{
background: url(./img/main\ 4.jpg)no-repeat;
width:100%;
height: 100%;
}
<div class="section1">
<div class="wrapper">
<div class="card">
<div class="pizza">
<div class="itembox1">
<h1>PIZZA</h1>
</div>
</div>
</div>
<div class="card">
<div class="burger">
<div class="itembox1">
<h1>BURGERS</h1>
</div>
</div>
</div>
<div class="card">
<div class="pasta">
<div class="itembox1">
<h1>PASTA</h1>
</div>
</div>
</div>
<div class="card">
<div class="salad">
<div class="itembox1">
<h1>SALAD & FIT</h1>
</div>
</div>
</div>
</div>
</div>
You could use the :nth-child selector to only put the margin on the images that are first in the row. Example:
#image-wrapper *:nth-child(odd) {
margin-right: 10px;
}
#image-wrapper > * { /* Select all direct children of image-wrapper */
display: inline-block;
width: calc((100% - 10px) / 2); /* set image width to the half of (the parent #image-wrapper minus the margin) */
vertical-align: middle; /* to get rid of the extra vertical spacing */
}
#image-wrapper {
background-color: blue;
}
<div id="image-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en"><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Block-inline.png?uselang=en">
</div>
Sorry for the unformatted HTML, but if i would format it correctly the browser would add some extra space inbetween the images; you can read about how to have the HTML indented correctly while having no extra spaces here
If i'm reading it correctly change this part to 100%.
.section1 .wrapper{
width: 100%;
height: 600px;
background-color: royalblue;
}
Add this to your CSS-Code:
* {
margin: 0;
padding: 0;
}
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 3 years ago.
I'm trying to put two images side-by-side (occupying the rest of the body) bellow my header, but I didn't find I good solution yet.
I want these two images to be a link for two different pages.
I have tried different things but neither of them worked.
HTML:
<body>
<div class="header">
<div class="logo">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\icons\logo_final.png">
<div class="lettering">
<h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
</div>
</div>
<div class="wrapper">
<div class="nav">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="box">
<a href="./Atower.html">
<img src="./IMAGENS/CI02_00_SALA_P6_4K.jpg" width="100%" >
</a>
</div>
<div class="box">
<a href="./muda.html">
<img src="C:\Users\cristovao\Documents\vscode\real_estate\IMAGENS\CASA B (3).jpg" width="100%" >
</a>
</div>
</div>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
}
.container {
display: inline-flex;
}
.box {
width: 50%;
}
.container {
float: left
}
.box {
width: 50%;
}
All my code is here;
It seems that using flexbox or float I cannot display each image with half of
the total width each, and 100% of the body height, I always have 50% of the
height below the images in white,
(representing body content) when I use flexbox and 50% of white space right when I use float.
Hope anyone can help me
Br
Use flexbox and set margin:0 and padding:0.
.container {
display: inline-flex;
margin:0;
padding:0;
}
.box {
width: 50%;
margin:0;
padding:0;
}
Make the <a> tag a block styled element so it neatly wraps your image. Then stretch your image to the full height and width of its parent and use object-fit: cover to make the image fill your box.
This will have the same effect as on a background-image with the background-size set to cover.
.box a {
display: block;
width: 100%;
height: 100%;
}
.box img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
I'm wanting to make my images smaller as the window size gets smaller.
However, I have to define the size of these two images by width, yet because 'max-width' overrides 'width' then it makes the images really small? I need to use 'max-width' to resize my images. However, I have two images on the left hand side that I have used both width and max-width and its width is defined and it resizes? What am I doing wrong with the other two?
img {
width: 100%;
height: auto;
width: auto\9;
}
/* css for the two larger images on the left-hand side*/
#imageleft {
display: inline-block;
height: 30px;
}
/* css for the two smaller images on the right-hand side*/
#imageright {
display: inline-block;
width: 50px;
height: 100px;
}
<!-- large images to left -->
<div id="imageleft">
<a href="index.html">
<img src="images/photo-1464375117522-1311d6a5b81f.jpeg" alt="Guitar image" style="max-width:100%; width:600px;height:400px">
</a>
<a href="index.html">
<img src="images/photo-1470020618177-f49a96241ae7.jpeg" alt="Fire breather" style="max-width:100%; width: 300px;height: 400px">
</a>
</div>
<!-- small images to the right -->
<div id="imageright">
<a href="index.html">
<img src="images/photo-1472653431158-6364773b2a56.jpeg" alt="festival" style=" max-width: 100%; height: 200px">
</a>
<a href="index.html">
<img src="images/photo-1473396413399-6717ef7c4093.jpeg" alt="stage view" style="width:291px; max-width: 100%;height: 196px">
</a>
</div>
#helpme123 I really didn't get what kind of layout you desire to achieve. Could you change your post and provide an example of it, please?
When you use width and max-width together, it's usually because you are giving the element a width relative to its parent (or the viewport or the current font-size or the base font-size), but you also want to explicitly state an absolute width, beyond which the element should not widen.
Working Example:
div {
width: 90%;
padding: 12px;
}
.parent {
max-width: 1000px;
background-color: rgb(255,0,0);
}
.child {
max-width: 600px;
background-color: rgb(255,255,0);
}
.grandchild {
max-width: 400px;
height: 100px;
background-color: rgb(0,0,255);
}
<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>
If you run the example in a full window and shrink the window size and then gradually grow it, you'll see that the divs each widen relative to their parent... until they reach their max-width, after which they stop widening.
I'm aiming for a page with a collage of 4 photos;
a large one on the left taking up 50% width of the page and 100% of the height.
3 smaller photos, each taking up 50% of the width of the page but 33% of the height.
I'm running into problems with the larger image though,
my current CSS is;
.container {
width: 50%;
height: 100%;
overflow: hidden;
-size: cover;
}
and my html;
<div class="container">
<img height="100%" width="100%" src="jpg"></img>
</div>
the image's 50% width is fine but the height is only 50%.
It's a large image(4k) and my aim was to have overflow:hidden so that it fills the container but it's not working.
How could I do this?
Edit:
I'm aiming for it to be similar to this website:
http://www.masitupungato.com/
Suggested Solution
In fact, it is the easiest solution
Use two different divs, one for the left side and the other for the right side.
The left side div takes the half of the container width, and contains a image
The right side div takes the half of the container width, and contains 3 different divs, each one takes 33% of this right div height, and contains an image.
Use the CSS below:
.container {
width: 250px;
height: 250px;
margin: auto;
}
#left {
width: 50%;
float: left;
height: 100%;
}
#right {
width: 50%;
float: left;
height: 100%;
}
.right-inner{
width: 100%;
height: 33%;
}
.left-inner {
width: 100%;
height: 100%;
}
Expected output
Check it out.
You might change the height of the biggest image to fit the window of the device. Try to to set its height to "100vh", maybe it is what you were looking for.
you can use display:flex; property for this purpose. it will resolve your issue dynamically.
<div class="wrapper">
<div class="big-image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="small-image-wrapper">
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
<div class="image">
<img src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="">
</div>
here is the fiddle https://jsfiddle.net/d95hw8fq/