I have a portrait picture (original size width :2500px height : 4500px) and I want to place this image in a modal div . the modal has width: 100vw and height: 100vh .this is the structure:
<div class="modal">
<div class="image-wrapper>
<img src="..." />
</div>
</div>
my question is how can I make this portrait image responsive in all width and height and also keep the aspect ratio. what should be the CSS like ? what should be the width and the height of image-wrapper and also the img (image) ?
.modal {
width: 200px;
height: 300px;
border: 1px solid red;
}
.modal--horizont {
width: 300px;
height: 200px;
}
.image-wrapper {
width: inherit;
height: inherit;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
<div class="modal">
<div class="image-wrapper">
<img src="https://picsum.photos/450/250" />
</div>
</div>
<div class="modal modal--horizont">
<div class="image-wrapper">
<img src="https://picsum.photos/450/250" />
</div>
</div>
Related
How can I scale up a image as much as possible without changing the picture ratio. So its either 100% width or 100% height
<div class="container"><img src=""></div>
You can use CSS background which is recommended in this case. You can read more about CSS backgrounds here.
div {
width: 200px;
height: 200px;
border: 1px solid red;
background: url(https://picsum.photos/200) center/cover no-repeat;
}
<div></div>
You can use the image tag (as you did) and set the width & height property to 100%.
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
img {
width: 100%;
height: 100%;
}
<div>
<img src="https://picsum.photos/200/300" />
</div>
P.S.: You can set the height to auto so the image becomes responsive.
img{
object-fit: contain;
}
use this for the image.
You can use object-fit: cover, the image will be sized to maintain its aspect ratio while filling the element’s entire content box
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div>
<image
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/close-up-of-cat-wearing-sunglasses-while-sitting-royalty-free-image-1571755145.jpg"
alt="test"
class="img"
/>
</div>
Just use object-fit: contain; for the image
.image-container {
width: 300px;
height: 300px;
border: 3px solid black;
padding: 15px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="image-container" style="height: 500px;">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="">
</div>
<div class="image-container" style="width: 500px;">
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="">
</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 have a row with three coloumns. I want to have a image on each coloumn's divs with same height irrespective of image size in each div.
I want the images to get resized with in a div. But i get different size of divs as the image size of myImage1.png, myImage2.png and myImage3.png is different.
This is happening because i have fixed padding in my 'bg' class. Can somebody help me to fix this? Below is my HTML and CSS code.
<div class="row IDE_container">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="bg">
<img src="myImage1.png" class="IDE_div" />
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="circle_bg circle_bg_sm">
<img src="myImage2.png" class="IDE_div" />
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>
</div>
.bg{
background-color: #ededed;
border-radius: 100%;
text-align: center;
padding: 35% 5%;
width: max-content;
max-width: 100%;
box-shadow: 0 0 3px 1px #DDD;
}
.IDE_div {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}
.IDE_container {
display: flex;
align-items: baseline;
}
For various kind of images, so can use object-fit property.
Add the CSS like this:
.IDE_div{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
<div class="col-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>
You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/
You need to set a height or max-height on the divs containing the images, or they will adapt to the height of their content (the images). As you've set the images to take up 100% width and height, and haven't constrained their parents, they will get as large as they can based on the original image size.
So, for example :
.IDE_container {
display: flex;
align-items: baseline;
div.col-3 {
div {
height: 200px;
.IDE_div {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--val);
padding-bottom: var(--val);
transform: translate(-50%, -50%);
z-index: -1;
border-radius: 50%;
}
}
}
}
}
You could give all containers the same class (e.g. fixed-height-bg) to style them more easily.
Also note: You don't need to give your columns individual classes for different screen sizes, as they always take up the same proportion. So, you can just use
<div class="col-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>
EDITED to add: if you want the images to maintain their proportions, you need to change your css to look like this:
img {
height: 100%; /* height of the parent container if specified, or of the image itself */
width: auto; /* will maintain the proportions of the image */
}
You can also switch those values, to height: auto; width: 100%; if you want the images to take the full width.
In this JSFiddle how can I downsize the img / img-container to be only as wide as its widest sibling div?
.outer {
display: inline-flex;
flex-flow: column;
}
.outer span {
display: flex;
}
div {
border: 1px dotted black;
}
<div class="outer">
<div>
<span>text</span>
<span>more text</span>
</div>
<div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
</div>
<div>
<span>this should determine width</span>
</div>
</div>
I'm not sure how cross-browser compatible this solution is, but it works on Chrome 64, Safari 11, and Firefox 57.
Give the element containing the img a width: 0; min-width: 100%; max-width: 100%;, and the img itself a width: 100%;.
Like this:
div {
border: 1px dotted black;
}
.outer {
display: inline-flex;
flex-flow: column wrap;
}
.child {
width: 0;
min-width: 100%;
max-width: 100%;
}
.img {
width: 100%;
}
<div class="outer">
<div>
<span>text</span>
<span>more text</span>
</div>
<div class="child">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded" />
</div>
<div class="main">
<span contenteditable>this should determine width</span>
</div>
</div>
Another Solution
Use a background-image instead of an img. This allows us to make the image scale with the width of the widest element in the flexbox.
The trick is to set a padding-bottom on the element with the image proportional to the image proportions. In this case the image is square, so I'll set `padding-bottom: 100%; so it creates a square element.
If the image was a wide rectangle, 200 x 100 px, I would set padding-bottom: 50%. Or, if the image was a tall rectangle, 100 x 200 px, I would set padding-bottom: 200%.
Like this:
div {
border: 1px dotted black;
}
.outer {
display: inline-flex;
flex-flow: column wrap;
}
.img {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded);
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 100%;
}
<div class="outer">
<div>
<span>text</span>
<span>more text</span>
</div>
<div class="img">
</div>
<div>
<span contenteditable>this should determine width</span>
</div>
</div>
You can do this with CSS table layout and set width: 1% on table and white-space: nowrap on text elements.
.outer {
display: table;
width: 1%;
}
.outer span {
white-space: nowrap;
}
div {
border: 1px dotted black;
}
img {
max-width: 100%;
}
<div class="outer">
<div><span>text</span><span>more text</span></div>
<div class="image">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
</div>
<div><span>this should determine width</span></div>
</div>
As you asked about it for flexbox layout particularly, here is trick playing with pseudo and positions. Note, it only works if you know the image aspect ratio already, example below for a square image.
div {
border: 1px dotted black;
}
.outer {
display: inline-flex;
flex-flow: column;
}
.image {
position: relative;
}
.image:before {
content: "";
display: block;
padding-top: 100%;
/*https://stackoverflow.com/a/10441480/483779*/
}
.image img {
position: absolute;
left: 0;
top: 0;
max-width: 100%;
}
<div class="outer">
<div class="image">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
</div>
<div>this should determine width</div>
</div>
Your CSS container is already as wide as its widest sibling div. You just need to shrink the border of the picture with paint or photoshop.
So I'm either missing something or misunderstanding how this should work, and I'm near my wit's end.
I would like to have four columns. Each column will have an image and a div containing text. The image should fill the width of the column with any overflow hidden so that the entire height does not exceed 600px. The wrapper should be centered horizontally and everything should be responsive, as I will delete the right column depending on screen size.
My problems... when all four columns are displayed, my text divs are not as wide as the images. When I kill #column4, the text divs are the same width as the images, but then I can't center the wrapper on the page. And the image in #column1, at some screen widths, won't hide the overflow of the image, so part of it "sticks out" so that he column is taller than the others. sigh I'm obviously self-taught... poorly.
I've tried killing the float and changing the display, but each display option gives me odd vertical spacing.
Edited to include an image of all four columns. First, and most irritating, is that I cannot get the wrapper div centered on the page. Also, note the images and text boxes are different widths. (However, when the page is narrower and column4 is hidden, then the widths are the same.) Finally, I would like the image to fill the available space vertically (65% and 75% of the column) with the text divs to fill the remainder so that all columns are the same height.
CSS Fail
#dcwrapper {
width: 90%;
max-width: 1200px;
height: 600px;
margin: 10px 5%;
position: relative;
}
.column {
width: 24%;
margin-right: 1%;
float: left;
}
#text1 {
height: 35%;
width: 100%;
}
#text2 {
height: 25%;
width: 100%;
}
#text3 {
height: 25%;
width: 100%;
}
#text4 {
height: 35%;
width: 100%;
}
#image1 img {
max-height: 385px;
max-width: 295px;
overflow: hidden;
}
#image2 img {
max-height: 445px;
max-width: 295px;
overflow: hidden;
}
#image3 img {
max-height: 445px;
max-width: 295px;
overflow: hidden;
}
#image4 img {
max-height: 385px;
max-width: 295px;
overflow: hidden;
}
.txt {
border: solid 2px #799048;
border-radius: 4px;
padding: 5px;
}
.image65{
height:65%;
overflow:hidden;
}
.image75{
height:75%;
overflow:hidden;
}
/* HIDE COLUMNS AT WIDTHS */
#media only screen and (max-width: 1250px) {
#column4 {
display: none;
}
#image1 img {
max-width: 100%;
}
#image2 img {
max-width: 100%;
}
#image3 img {
max-width: 100%;
}
#image4 img {
max-width: 100%;
}
}
<div id="wrapper">
<div id="column1" class="column">
<div id="text1" class="txt">
These are our hours.
</div>
<!--end text1-->
<div id="image1" class="image65">
<img src="1a.jpg" />
</div>
</div>
<!--end column1-->
<div id="column2" class="column">
<div id="image2" class="image75">
<img src="2a.jpg" />
</div>
<div id="text2" class="txt">
We have a lot of different products now.
</div>
</div>
<!--end column2-->
<div id="column3" class="column">
<div id="text3" class="txt">
Yo, make an appointment!
</div>
<div id="image3" class="image75">
<img src="3a.jpg" />
</div>
</div>
<!--end column3-->
<div id="column4" class="column">
<div id="image4" class="image65">
<img src="4a.jpg" />
</div>
<div id="text4" class="txt">
Lookey what's new
</div>
</div>
<!--end column4-->
</div>
<!--end wrapper-->