how can I solve this image oversize problem in my simple HTML photogallery with finding images in directory by PHP? I can't solve it and it's not visually good. Can you please help me? Screenshot is
Thanks.
Set all of the pictures with the same class, then add an image height to that class and it will set the images to all the same height.
Here is an example that i just made - http://jsfiddle.net/3gd5ooLf/
Im not sure how you are getting the image in PHP so i can't tell you how to set the class without seeing some code.
here's the CSS example:
.height {
height: 100px;
}
This may be a good example to you . Refer to stackoverflow old question too. here is the link:link
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
In your css file, you could add heigth and width property to adjust the images size.
For example:
img {
heigth:200px;
width: auto;
}
will set the heigth to 200px, but will keep the aspect ratio. To have square images, set the width to, for example, 200px
If you prefer, you could set the image to be scrollable when it's too long like so:
img {
height:200px;
width:200px;
overflow: scroll;
}
Related
I've found a lot of answers to this question, but none (that I can find) apply to my particular situation.
I have an image in a div that I would like to scale with the width of the page. However, my image is much larger than what you actually see, as I'm using object-fit: cover and object-position to fit it to the container. I can't find a solution that keeps the image the same while scaling the container (and therefore image) down.
In other words, I would like the container and image to scale and have the image look the exactly the same. All the solutions I've found move the image around inside the container when the page width is changed.
Edit for clarity: Imagine there's a dot at the very center of the image, and normally that dot is in the very center of the container. In my case (because of object-position I think), the dot moves vertically when the width of the page is changed. I need some way to scale the container down to keep the dot in the same place.
Edit 2: Figured it out. Setting the height of the container via vw (viewport width) does exactly what I'm looking for. e.g. height: 10vw;
Here's the CSS I have at the moment:
.container {
height: 25%; /* This would need to be removed/changed I assume.*/
}
.image {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 100% 80%;
}
My container is the full width of the page.
This seems so obvious to me, I think I didn't get your point.
Is this what you want ? This snippet shows that no matter the size of the picture, it will fit into the container.
EDIT Your issue is that your image isn't centered in your container. To do that, you have several options. Here is one using a relative position with a transform. You could also use flexboxes, which are, in my opinion, much better.
.container {
width: 500px;
border: 1px solid darkcyan;
height: 600px;
}
img {
max-width: 100%;
height: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<img src="https://placeholdit.co//i/500x250?&bg=cccccc&fc=000000&text=BIG IMAGE">
</div>
.image{
max-width: 100%;
}
<img src="https://wallpaperbrowse.com/media/images/750806.jpg" class="image" />
To have your image fill the width of it's container, you need the max-width property:
.image {
max-width: 100%;
}
Well, after a bit more digging I found the answer to my question. The solution was to use vw (viewport width) to set the height of my container.
In my case, using height: 10vw; on the container does exactly what I'm looking for. The value of that can be adjusted of course depending on how much space you want the container/image to take up.
You can use max-width: 100%; in style of the img.
But another way is to use your image as a background of your div with the following style:
.container {
background-image: url(https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width:70%;
height:300px;
margin:0 auto;
}
<div class="container"><div>
Update:
You can run the following demo and change the size of it here
.container {
background-color: black;
width:70%;
margin:0 auto;
padding:20px;
position:relative;
}
img{
position:relative;
max-width:100%;
}
.dot{
background:yellow;
width:10px;
height:10px;
position:absolute;
left:50%;
top:50%;
transform: translate(-5px,-5px);
z-index:1;
border-radius:50%;
}
<div class="container">
<div class="dot"></div>
<img src="https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png">
<div>
You can see the yellow dot always (any page sizes) in the center of image and center of the container:
Small page size:
Large page size
I have a div with a background-image assigned in the CSS3 file.
The image is responsive, so it scales according to the screen size BUT the container keeps the height at all screen sizes.
I need to know if there is a way to make the container responsive as well as the background image.
HTML:
<div class="responsive> </div>
CSS3:
.responsive {
background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
border: 1px solid red;
background-size: contain;
width: 100%;
height: 270px;
}
I must use background-image selector and no img src tag.
Here is the fiddle file.
Thank you.
Update - February 3rd, 2021
Since I wrote the original answer a new CSS property has been introduced - 'aspect-ratio' - to solve this problem.
<div id="responsive">some text</div>
CSS:
#container {
width: 100%;
background: hotpink;
aspect-ratio: 100 / 29;
}
At the time of writing this CSS property doesn't yet have widespread browser support.
Working Example: https://jsfiddle.net/fu0nL57t/
Ref: https://web.dev/aspect-ratio/
=====================================================
Original Answer
This can be done an additional dummy element, inside the element you want to keep at a fixed ratio. If you specify a padding-top or padding-bottom as a percentage, that is in terms of the width of the container element, and this then keeps the height of the container element at a fixed ratio.
<div id="responsive">
some text
<div id="dummy"></div>
</div>
CSS:
#responsive {
display: inline-block;
position: relative;
width: 100%;
background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
background-size: contain;
}
#dummy {
padding-top: 29%;
}
Working Example:
https://jsfiddle.net/098jj61q/
Credits:
http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Yes its correct. According to #Paulie_D, you can't do that with background image.As per your requirement you can do that using img tag only.
What you have to do, without using the div just make the image responsive by treating it as a block element as,
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
or if you insist to use division with background image then cover the backgound image and set min-height as,
div.mydiv {
background:url(background_image.jpg);
background-repeat:no-repeat !important;
background-size: cover !important;
background-position:center center !important;
min-height:300px;
}
I want to display image through CSS. But it is not displaying correctly. Can anyone help me to know that how can we display full size image in our browser without giving dam height property.
Thanks in advance.
Here is my markup:
<div class="Main_Content">
<div class="Slider">
</div>
Here is the CSS (not working)
.Main_Content {
width: 100%;
}
.Slider {
background-image: url("Construction%20Company/Stock%20Images/MG_5194-e1348062448312.jpg");
display: flex;
float: left;
height: 300px;
position: unset;
width: 100%;
}
.Slider {
background-size:cover;
background-repeat:no-repeat;
}
Will do the job. It will try to make the images as big until it reaches fullscreen.
See background-size property on MDN for more details.
Without using height use,
<img>
tag. This will definitely solve your issue.
Good afternoon stackoverflow community,
I have a file with some images inside it, and I want to use each part of this image separately without creating different files. So I started to look for ways to give position through CSS to "chop" the piece that I want to show.
I tried using properties like clipwithout success. The closest I got was giving a height and background-position when inserting some random text inside the DIV.
Here's a fiddle I did to demonstrate it, but since I couldn't update a image to it I just made with background-color.
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
}
http://jsfiddle.net/PatrickBDC/HaGNa/
Is there a way to show that background, the same exact size but without the text?
Thank you very much!
You need to have a width for your div as well if the div is empty. try something like this
.icon {
float: left;
background: url () no-repeat 0 0;
height: 29.2px;
width:60px;
}
If you would like your div to display without content, you need to specify width in your CSS:
.icon {
float: left;
background-color:#6495ED;
background-position: 0 0px;
height: 29.2px;
width: 50px;
}
Here is a working fiddle.
Just add width: 100px; and height: 50px;property in your code. You can add width and height as per the part of the image which you want to show.
I have a gallery slider, with random images from the forum. So, the size is pretty random but the gallery(container frame) itself is fix sized. So, we decided to set the image height to a fixed size but the width is set to auto. This way, the image will not be squeezed inside the container if its ratio different is too much from the container ratio.
Then, I set the container's text-align to center in order to center the image. But, this only works for images smaller than the container. If the image is still bigger than the container (after resize), the image is aligned to the left instead.
The jsffidle example.
NOTE: Using background-image is not a solution because resizing background image currently is still not supported by many browsers (especially IE and some Chinese browsers).
Hope there is enough information here. So, how do I center the image in this situation?
I have found another solution
<style type="text/css">
.container {
width:600px; //set how much you want
overflow: hidden;
position: relative;
}
.containerSecond{
position: absolute;
top:0px;
left:-100%;
width:300%;
}
.image{
width: 800px; //your image size
}
</style>
and in body
<div class="container">
<div class="containerSecond">
<image src="..." class="" />
</div>
</div>
This will center your image whenever your container is bigger or smaller. In this case your image should be bigger than 300% of container to not be centered, but in that case you can make with of containerSecond bigger, and it will work
You would use max sizes:
img {
max-width: 200px;
max-height: 200px;
}
Take a look: http://jsfiddle.net/fabianhjr/zW6eh/
Edit: still having centring problems, I will get back to you on that.
I had similar problem, but the solution was about to crop right and left margin, while the image should be centered. Smaller images are stretched.
My solution is also in this JS Fiddle: http://jsfiddle.net/david_binda/9tTRQ/
HTML
<div class="thumb-wrapper">
<a href="" title="" class="img">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/40/Tectonic_plate_boundaries.png" alt="" />
</a>
</div>
CSS
.thumb-wrapper{
width: 200px; // desired thumbnail width
height: 150px; // desired thumbnail height
overflow: hidden;
position: relative;
margin: 0 auto;
}
.thumb-wrapper .img{
display: block;
position: absolute;
width: 300px; // should be wider than final thumbnail
height: 150px; // desired thumbnail height
left: 50%;
margin-left: -150px; // half of above defined width eg. 300/2 = 150
}
.thumb-wrapper .img img{
width: auto !important;
max-width: 300px !important; // should be wider than final thumbnail
min-width: 200px !important; // desired width of thumbnail
height: 150px !important; // desired thumbnail height
margin: 0 auto;
display: block;
}
The solution that I've found is:
img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);//You have to add all the prefixes
//of transform
}
div.container{
position:relative;
overflow:hidden;
}
Okay, I think this is your best solution.
You set your wrapper around each image to display: table; and then one more wrapper inside that with a display: table-row; and set your img's to display: table-cell
This way you can resize anyway you like while keeping the ratio.
http://jsfiddle.net/zW6eh/17/
You can also simply set your height: to 200px; This will keep your width auto by default.