Problem: img is taller than img-box
I find two ways, but I don't want to do this:
remove img-box wrap
use max-height: 100vh; max-width: 100vw; in img tag
body {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.wrap {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 500px;
background: red;
overflow: hidden;
}
.img-box {
width: auto;
height: auto;
}
img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
<div class="wrap">
<div class="img-box">
<img src="https://picsum.photos/900/500" alt="" />
</div>
</div>
<div class="wrap">
<div class="img-box">
<img src="https://picsum.photos/200/600" alt="" />
</div>
</div>
(Codesandbox)
On img-box set height to 100% instead of auto.
That way img will not stretch img-box outside the boundaries of its parent.
You can also set height to a definite value, like height: 100px.
Related
I have problem with change size while manipulating browser size. I need to keep one column on another so I use relative + absolute combination.
I'm wondering if there is an option with only CSS to make such element responsive.
<div class="clock">
<div id="apDiv3" class="opening">
<div class="clock">
<img id="apDiv2" class="clock" src="./assets/stoper-01.png" usemap="#image-map">
<img id="apDiv1" class="clockArrow" src="./assets/stoper-01-arrow.png">
<map name="image-map">
<area area settings>
...
</map>
</div>
</div>
</div>
div.clock {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
img.clock {
position: relative;
}
.clockArrow {
position: absolute;
}
You could try using the CSS calc() function like the given eg.
.top-img{
...
width: calc(var(--background-img-width) - var(--offset));
...
}
Here, add --background-ing-width to your :root and apply it in .background-img's width. Then you can add --offset in your :root and add to .top-img as shown and tweak these two variables to your liking.
I'm wondering if there is an option with only CSS to make such element responsive.
Here's a sample:
.wrapper{
height: 100vh;
margin: 0 30%;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
min-width: max-content;
}
.circle{
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fc1.staticflickr.com%2F1%2F694%2F23104548209_fed5c6d1cd_b.jpg&f=1&nofb=1);
height: 50vh;
width: 50vh;
border-radius: 50%;
background-size: 100% 100%;
display: flex;
align-items: center;
padding: 1.3vh;
}
.rec{
flex: 1;
height: 15vh;
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.cameraegg.org%2Fwp-content%2Fuploads%2F2012%2F09%2FSony-DSC-RX1-Sample-Image.jpg&f=1&nofb=1);
background-size: 100% 100%;
}
<div class="wrapper">
<div class="circle">
<div class="rec"></div>
</div>
</div>
You can make use of viewport height and width to make the elements responsive. More on units here.
I want to have a container that includes an image and a caption.
The container should always be the same size, the caption height might change.
In my mind the caption should get the auto height, depending on it’s size and the rest of the containers height will be allocated to the image.
I tried doing that with a div and i worked flawlessly. When I exchange the placeholder div with an actual image tag, the image will take the 100% height of the container, not of its allocated flex space in the container.
Why is that and how can I fix it?
Example showing the difference between div and image tag:
https://codepen.io/lkssmnt-the-lessful/pen/QWqbxNK?editors=1100
.project {
height: 500px;
width: 500px;
display: flex;
flex-direction: column;
}
.project img {
height: 100%;
width: 100%;
object-fit: cover;
}
Add overflow: hidden to the .img tag. - This has the negative effect of snipping the bottom of the image off, however.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.project {
height: 500px;
width: 500px;
border: 5px solid red;
margin: 1rem;
display: flex;
flex-direction: column;
}
.project p {
padding: 1rem;
}
.project img {
overflow: hidden;
height: 100%;
width: 100%;
object-fit: cover;
}
.project .test {
height: 100%;
width: 100%;
background: beige;
}
<div class="wrapper">
<div class="project">
<div class="test"></div>
<p>Project 1</p>
</div>
<div class="project">
<img src="https://images.unsplash.com/photo-1518676590629-3dcbd9c5a5c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80">
<p>Project 2</p>
</div>
</div>
So im trying to make a flexbox which displays a countrys flag and the language name next to it. The problem i ran into was that the text and picture are treated individually and end up seperated if they are at the end of the box. Is there a way to make one flag with its language into one box and the same for the others, so that the flag and corresponding language are always together?
This is my code so far:
#size {
width: 105px;
height: 60px;
flex-basis: 10%;
}
.flex-container {
margin: auto;
text-align: center;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 80%;
height: 500px;
background-color: aqua;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
<div class="flex-container">
<img src="Flag/BU.png" id="size"><a>България</a>
<img src="Flag/CH.png" id="size"><a>中国人</a>
<img src="Flag/FR.png" id="size"><a>Francaise</a>
<img src="Flag/GER.png" id="size"><a>Deutsch</a>
<img src="Flag/HU.png" id="size"><a>Magyar</a>
<img src="Flag/IN.png" id="size"><a>हिंदी</a>
<img src="Flag/JA.png" id="size"><a>日本</a>
<img src="Flag/SK.png" id="size"><a>한국인</a>
<img src="Flag/SP.png" id="size"><a>Español</a>
<img src="Flag/UK.png" id="size"><a>English</a>
</div>
This is a perfect example to use the grid system instead of flexbox
#size {
width: 105px;
height: 60px;
flex-basis: 10%;
}
.grid-container {
margin: 0 auto;
text-align: center;
display: grid;
width: 80%;
min-height: 500px;
background-color: #f5f5f5;
}
<div class="grid-container">
<img src="Flag/BU.png" id="size"><a>България</a>
<img src="Flag/CH.png" id="size"><a>中国人</a>
<img src="Flag/FR.png" id="size"><a>Francaise</a>
<img src="Flag/GER.png" id="size"><a>Deutsch</a>
<img src="Flag/HU.png" id="size"><a>Magyar</a>
<img src="Flag/IN.png" id="size"><a>हिंदी</a>
<img src="Flag/JA.png" id="size"><a>日本</a>
<img src="Flag/SK.png" id="size"><a>한국인</a>
<img src="Flag/SP.png" id="size"><a>Español</a>
<img src="Flag/UK.png" id="size"><a>English</a>
</div>
I have a div with a fixed height, and inside it there is an image. This image is larger than the width and height of the containing div. I want to make the width of the image to match the width of the div, and then make the height of the image automatically generated.
HTML:
<template>
<div class="portfolio">
<div class="header">
Portfolio
</div>
<div class="projects">
<div class="project">
<img src="../assets/projects/charlotte_folke.jpg" />
</div>
</div>
<div class="overview">
</div>
</div>
</template>
SCSS:
.portfolio {
width: 100%;
height: 100%;
}
.header {
height: 10%;
display: flex;
font-size: 24px;
color: #B59762;
align-items: center;
justify-content: center;
}
.projects {
height: 80%;
display: flex;
overflow: auto;
flex-direction: column;
}
.project {
width: 100%;
height: 35%;
overflow: hidden;
img {
width: 100%;
height: auto;
}
}
The problem with this solution, is that the image element still takes up space below the containing div. I want to cut off the image completely, so it only takes up the available space specified by the containing div.
How can i achieve this?
I am trying to vertically and horizontally centre images within a javascript slideshow, however, I cannot figure out how to make this work,
I have tried display: inline-block with vertical-align: center; but it wont work
Any suggestions?
CSS
img {
height: 100%;
width: 100%;
max-height: 100vh;
max-width: 100vh;
object-fit: contain;
}
.slideshow-container img {
display: block;
margin: 0px auto;
}
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
</div>
<div class="mySlides fade">
<img src="001%20(1).jpg" onclick="plusSlides(1)">
</div>
<div class="nextprevious">
<a class="prev" onclick="plusSlides(-1)">←</a>
<a class="next" onclick="plusSlides(1)">→</a>
<div class="numbertext"><span>003</span> / <span>003</span></div>
</div>
You should check out display: flex, and justify-content: center; and align-content: center; properties.
.slideshow-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.mySlides {
margin: 0px auto; /* horizontal align center in div */
}