I'm having some trouble with the CSS for my page which displays social media style posts including images. When displaying the images they are placed inside of a div tag which is styled to try and reduce the size of the images and display the images horziontally next to eachother.
However, I am having the issue that the images still try to stack on top of each other and I can not get them to resize how I would like, especially on mobile. Currently based on some other thread here this is what I've got
.postImg{
display: inline-block;
height:100%;
width:100%;
object-fit: scale-down;
}
.postImgDiv{
height: 100px;
}
Your image taking 100% of the row width. Change it to: width: auto.
Look at this (your case):
.postImg{
display: inline-block;
height:100%;
width:100%;
object-fit: scale-down;
border: 1px solid;
}
.postImgDiv{
height: 100px;
}
<div class="postImgDiv">
<div class="postImg">A</div>
<div class="postImg">B</div>
<div>
After fix:
.postImg{
display: inline-block;
height:100%;
width:auto;
object-fit: scale-down;
border: 1px solid;
}
.postImgDiv{
height: 100px;
text-align: center;
}
<div class="postImgDiv">
<div class="postImg">A</div>
<div class="postImg">B</div>
<div>
Related
I looked over thousands of questions all of them they want to fit picture in a parent div. I can fit picture in a parent div but when I resize the picture to smaller size the div gets smaller as well. I tried max-width: 80% but the div gets smaller also. I don't want the div box to resize because there are other buttons and lists in the page that move with it. And I cant use background-image trick as well. The only solution is to set for example height: 150px for box div but that also gives me problem for smaller screen sizes. Can anybody be any help? This question probably will be flagged duplicated but I gave up on searching.
.box {
width: 100%;
float: left;
}
.picture {
border: none;
outline: none;
max-width: 100%;
vertical-align: middle;
}
<div class="box">
<img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>
I'm honestly not completly sure what your asking about but solving the size of a picture inside a div with paddings and margins is not what we want to do. there you have to use media-queries to get responsiveness.
try transform: scale(0.5)
scale let you resize your content dependent on how big your content was initially.
.box {
width: 100%;
float: left;
}
.picture {
border: none;
outline: none;
max-width: 100%;
vertical-align: middle;
transform: scale(0.5);
}
<div class="box">
<img class="picture" src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>
Your box element should have a height too. Also, set a position relative to it and a position absolute to the image. The child element should always be placed inside the parent with an absolute position. This way you can individually set sizes and positions.
You can use viewport height for div (vh) as per your need.
.box {
width: 100%;
height:100vh;
float: left;
border:2px green solid;
margin-bottom:10px;
}
.picture {
border: none;
outline: none;
max-width: 80%;
vertical-align: middle;
}
See the example: https://jsfiddle.net/srijan1709/fvezsnjb/10/
Edit-
You can use object-fit for adjusting the image inside div also. Set value of object-fit to scale-down or contain as per your need.
See the example: https://jsfiddle.net/srijan1709/fvezsnjb/27
Try making the div absolute and the image relative to it. I have added a border to the div to see if the image is moving by itself as a test:
.box {
position: absolute;
border: 5px dotted blue; // For testing (remove after done testing)
width: 100%;
float: left;
}
.picture {
position: relative;
padding: 100px 50px 50px 100px; // Moves the image within the div tag
outline: none;
max-width: 100%;
vertical-align: middle;
}
Expected Output:
EDIT: Adjust the padding and width values according to your code expectations.
Please See JSFiddle
.d1 {
background-color: red;
text-align: center;
}
<div class="d1">
<img src="http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg">
</div>
I use the above simple code to display an image in the middle a div. Code works good however when I resize the window below the width of the image, the border/div doesn't cover the image... Is there a way to fix this? Ty
.d1 {
background-color: red;
}
.img{
display: block;
width: 100%;
margin: 0px auto;
}
Treat the Image as a block content not as inline-element.
I hope this helps.
If you want to use a backgound image for your <div> I suggest you set the image as a background-image for your div, and remove your <img> element.
This will save you from using an addition element and also fix your problem:
.d1 {
width:300px;
height:100px;
background-color: red;
text-align: center;
background-image: url(http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg);
background-size:cover;
}
<div class="d1">
</div>
I want an image with the size of 250x50px to resize itself (go smaller) according to the window size, in other words, make it responsive.
The #wrapper holds the content for the whole page. The #headerholds the image and the navigation bar.
I know this may be easier with the use of #media screenbut I am looking for a pure CSS approach.
Here is what I am currently using:
HTML:
<div id="wrapper">
<div id="header">
<div style="max-width:500px;">
<img id="logo" src="images/logo.jpg" alt="logo" href="#">
</div>
</div>
CSS:
#wrapper{
width: 100%;
height: auto;
}
#header{
height: 100px;
min-width: 300px;
border-bottom: 1px solid black;
}
#logo{
float: left;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
you have a few issues in your code,
don't use inline-styles,
put the border-bottom in child div of #header
no need for IE hacks
no need for a min-width here.
Note: I don't see why you need this image to get smaller, lets see, its 250x50, when the lower screen are 320px so already fits perfectly
here is a snippet
#wrapper {
width: 100%;
border: dashed red 1px
}
#header > div {
max-width: 500px;
border-bottom: 1px solid black;
}
#logo {
max-width: 100%;
height: auto;
display: block
}
<div id="wrapper">
<div id="header">
<div>
<img id="logo" src="//placehold.it/250x50" alt="logo" />
</div>
</div>
</div>
First off, using #media screen is a CSS approach. But if you don't want that, you can just relative units like em or % and give a min-width:
#logo {
width: 20%;
min-width: 100px;
}
thing is, you already put some limits by setting the header to min width 300px and the div inside to max width 500px, so if you want to have more flexibility with those as well, consider different units too.
I have a div with percentages as values, and an image i need to fit in it.
The width should be resized to fit the div, whereas the height of the image that exceeds the div should be hidden.
(a clearer visual explanation)
this is what I have so far(edit: pasted the wrong link, my bad)
the html:
<div class="wrap">
<img class="imgofcrap" src="http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg" />
</div>
the css:
div.wrap {
width: 20%;
height: 5%;
overflow:hidden;
border: 2px solid black; }
img.imgofcrap{
width: 100%;
height: auto; }
I thing so you are looking for a responsive image.
so please cheack below JSfiddle URL
img.imgofcrap{
max-width:100%;
height: auto;
display:block;
}
JSFiddle Link
Pretty simple and you was close.
So we just want to use the width of the img so we set that as 100%. As the parent has a width it will use that. Now the parent you have set as a percentage height. But the div has no parent with an height. So we set it using:
html, body {
height: 100%;
}
So now we have:
html, body {
height: 100%;
}
div.wrap {
width: 20%;
height: 6%;
overflow:hidden;
border: 2px solid black;
}
img.imgofcrap {
width: 100%;
}
Demo Here
Change to this:
img.imgofcrap{
width: 100%;
height: auto;
}
fiddle
Also take a look here The difference between width:auto and width:100%
Your looking for a background cover solution: if you only have to use the image like you showed there and only in latest browsers i would go for
<div class="wrap"></div>
div.wrap {
width: 20%;
height: 5%;
overflow:hidden;
border: 2px solid black;
background: transparent url("http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg") center;
background-size: cover;
}
Fiddle here
if you need ie7+ support i made a small project which covers that - feel free to use it or extended it to your needs:
https://github.com/sp90/backgroundCover
I have an image of 400px and a div that is smaller (the width is not always 300px as in my example). I want to center the image in the div, and if there is an overflow, hide it.
Note: I must keep the position:absolute on the image. I'm working with css-transitions, and if I use position:relative, my image shakes a bit (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/).
jsfiddle
http://jsfiddle.net/wjw83/1/
You should make the container relative and give it a height as well and you're done.
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}
<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
If you want to you can also center the image vertically by adding a negative margin and top position: http://jsfiddle.net/jaap/wjw83/5/
None of the above solutions were working out well for me. I needed a dynamic image size to fit in a circular parent container with overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
Working example here:
http://codepen.io/simgooder/pen/yNmXer
Most recent solution:
HTML
<div class="parent">
<img src="image.jpg" height="600" width="600"/>
</div>
CSS
.parent {
width: 200px;
height: 200px;
overflow: hidden;
/* Magic */
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
Found this nice solution by MELISSA PENTA (https://www.localwisdom.com/)
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
Center any size image in div
Used with rounded wrapper and different sized images.
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
Working example here codepen
For me flex-box worked perfect to center the image.
this is my html-code:
<div class="img-wrapper">
<img src="..." >
</div>
and this i used for css:
I wanted the Image same wide as the wrapper-element, but if the height is greater than the height of the wrapper-element it should be "cropped"/not displayed.
.img-wrapper{
width: 100%;
height: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
height: auto;
width: 100%;
}
working solution with flex-box for posterity:
main points:
overflow hidden for wrapper
image height and width must be specified, cannot be percentage.
use any method you want to center the image.
wrapper {
width: 80;
height: 80;
overflow: hidden;
align-items: center;
justify-content: center;
}
image {
width: min-content;
height: min-content;
}
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
just make sure how you are using image through css background use backgroud image position like background: url(your image path) no-repeat center center; automatically it wil align center to the screen.
this seems to work on our site, using your ideas and a little math based upon the left edge of wrapper div. It seems redundant to go left 50% then take out 50% extra margin, but it seems to work.
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<img class="CropCenter" src="img.png">
</div>
I have been trying to implement Jaap's answer inside this page of my recent site, with one difference : the .main {height:} was set to auto instead of a fixed px value.
As responsive developer i am looking for a solution to synchronize the image height with the left floating text element, yet only in case my text height becomes greater then my actual image height.
In that case the image should not be rescaled, but cropped and centered as decribed in the original question here above.
Can this be done ?
You can simulate the behaviour by slowly downsizing the browser's width.
This issue is a huge pain in the a.. but I finally got it.
I've seen a lot of complicated solutions. This is so simple now that I see it.
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}
you the have to corp your image from sides to hide it try this
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
one of the demo for the first way on the site above
try demo
i will do some reading on it too