So if I add a link to an image, the link area goes the entire width of the page, which is beyond the size of the image. Here's my entire CSS code:
img {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}
However, I've deduced this happens due to this single line:
display: block;
I want my images to be centered and mobile-friendly, so I don't think I can change this coding, but is there something I can do to the a element that'll prevent the link area from extending outside my images?
Here's a test page: Link
You can change this coding, while maintaining mobile-friendliness.
One way to do this would be to create an overlaying <div> that has it's text centered. Then set the max-width of the image to 100%. And you're done.
.text-center {
text-align: center;
}
img {
max-width: 100%;
}
<div class="text-center">
<a href="http://www.gloryhood.com/images/free-will-1.png">
<img src="http://www.gloryhood.com/images/free-will-1.png" />
</a>
</div>
With this code (see example), your image is centered and mobile friendly:
body {
text-align: center;
}
img {
max-width: 100%
}
When your page gets more complicated than that, it helps to wrap images (or even whole content block) within container div-s to help with the positioning part.
Related
Is it possible to give an image inside a div an anchor point to control the scaling when resizing the browser window? So instead it being centered for example the whole time, another point of the image should act as anchor point and the image would resize around that point. Or is it possible to make the image move to the left when resized? Is this possible using CSS only?
CSS
.banner {
background-color:grey;
height:734px;
position: relative;
display: flex;
overflow: hidden
}
.banner img {
width: 1920px;
}
HTML
<div class="banner">
<img src="source" alt="bannerimage">
</div>
I cannot figure this out. I would like 3 images to sit side by side inside a 930px wide div.
so, when you enter into responsive design mode, or drag the screen browser width wise to make it smaller all the 3 images stay side by side inside the div without wrapping to the next line.
But automatically start to re-size to fit the re-sized div.
The 3 images only start to resize correctly inside the div only when the 3rd image has wrapped under the second image. So it looks like this below.
[]
[]
[]
Once all the images are vertically aligned the images then start to shrink down correctly. But this image wrapping under the next image is no good for me, as when viewing the website on a mobile phone, or when re-sizing the screen the images are still super large.
Must be a way to stop these images from wrapping underneath each other, and just stay inline but automatically re-size themselves
as the div/page width shrinks down?
I've tried white-space: nowrap; display: inline; inline-block; even display: table-cell; nothing seems
to do what I need it to do. However, if I use only one image instead of 2, or 3 then it works perfectly fine.
You're probably thinking why not just put all 3 images inside 1 image in photoshop? Well each img is an href link, so that's not possible.
Even floating the images all to the left still doesn't help.
Here's my CSS/HTML
img {
max-width: 100%;
height: auto;
}
then
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png"> <img src="lights.png"> <img src="action.png">
</div>
Can someone tell me where I may be going wrong please? How can I stop images wrapping underneath other images when the parent container shrinks down.
I've had to resort to using multiple #media queries of different pre-fixed image sizes per break-point. But there's got to be a much much easier way. Something so simple that I'm missing.
I figure I might share a flexbox solution as well. I've included the code below so it should be relatively self explanatory. Feel free to leave a comment below if you think I should clarify anything.
.container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
img {
flex: 1;
max-width: 100%;
height: auto;
max-height: 310px;
}
<div class="container" style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="https://cdn.vox-cdn.com/uploads/chorus_image/image/44336734/fujifilmx100t-1.0.0.jpg">
<img src="https://d3k7s9wfq6lao0.cloudfront.net/latest/37504/main/7.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Clapperboard%2C_O2_film%2C_September_2008.jpg">
</div>
you can use inline-block for this. you will need to alter the width with media queries as your screen gets smaller
img {
display:inline-block;
width: 33%;
height: auto;
}
you should also wrap the images in a div.container and give this div a width:100%
Image width set to 100% occupy all the horizontal space of the container, since you want to fit three images inline to each other, divide the 100% by 3 so that when the container is resized the three images will occupy one third of the available space. The margin-left: -2px is to make sure that the image border don't touch the edge, otherwise it will wrap to new line. Try this sample:
CSS:
img {
display: inline-block;
width: 33%;
height: auto;
margin-left: -2px;
box-sizing: border-box;
}
HTML element:
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png">
<img src="lights.png">
<img src="action.png">
</div>
My answers' more or less a follow up to Tom's which I'm writing on here so I don't overflow the comments section.
The problem with max-width: 100% is that the relative sizing doesn't start to kick in until each image outgrows its parent, in this case, the div. Since all images have a default absolute size based on their image src they force themselves onto a new line before resizing and so only then will max-width start doing what you want it to. As per Tom's response, the percentage sizing of 33% forces the images to have a relative size which causes them to shrink immediately.
Naturally 'img' tags are given the display of inline which means you could opt to just use the following code:
img {
width: 33.3%;
}
Now here's the biggest gotcha I had when dealing with inline images.
A display of inline and inline-block is respective of the whitespace
that exists within your HTML markup.
Therefore the small presence of whitespace below whilst not evident is enough to cause images to still move over to a new line.
img {
width: 33.3%;
}
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="https://picsum.photos/250/250/?random1">
<img src="https://picsum.photos/250/250/?random2">
<img src="https://picsum.photos/250/250/?random3">
</div>
But once this whitespace is removed the images all fit perfectly across the screen whilst resizing.
img {
width: 33.3%;
}
<div style="width: 930px; max-width: 100%; border: 1px solid blue;"><img src="https://picsum.photos/250/250/?random1"><img src="https://picsum.photos/250/250/?random2"><img src="https://picsum.photos/250/250/?random3"></div>
Now compressing the HTML markup above makes it rather unwieldy and so as an alternative, you could opt to use the floating method. By setting a float of left for each image you'll force each 'img' tag to sit flush, regardless of the extra spacing between them. Just be sure to give the parent div a float of left as well or an overflow of auto to stop it from collapsing.
img {
width: 33.3%;
float: left;
}
After many days testing various ways out here's the perfect way to do this without flex. Make sure each image is wrapped in its own div that's important.
<style>
* {
box-sizing: border-box;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
Now, here's where I've changed it up a little bit for more flexibility. Since each image is now in its own div we can then make the image width: 100%; or max-width: 100%; then add the width: 33.33%; part that used to be under img {} to each of the new 3 div columns instead.
<div class="row">
<div class="column"> /* 33.33% width */
<img src="flash-tooltip.png">
</div>
<div class="column"> /* 33.33% width */
<img src="html-tooltip.png">
</div>
<div class="column"> /* 33.33% width */
<img src="portables-tooltip.png">
</div>
</div>
Lot's of people provided great advice.
The easiest way is using flex. But, something people don't tell you when using flexbox. You should still wrap each of the images inside their own div container. Otherwise, you will get some weird things happening when you encase them in hyperlink anchors, that is if all three images are just placed inside the first flex container div. And without their own div container images won't keep any kind aspect ratio when they shrink/enlarge. They just squash and skew together.
And finally very important! Always make sure any images inside a flex container is set up the same way. Either width: 100%; or max-width: 100%; otherwise, the images will not shrink up/down at all in Google Chrome.
I've included this same method as above, only this time in a flexbox version.
Easy problem: Centering an img within a div:
I have div with a given width and height, and an img with an unknown width and height within the div:
<style>
div {
width: ...;
height: ...;
}
</style>
<div>
<img src="...">
</div>
Centering the img while keeping it contained is easy:
div {
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
max-height: 100%;
}
Here's a couple examples of centering a 500x300 img using this approach:
In a 400x200 div: https://jsfiddle.net/thejonwithnoh/f9evLpx0/
In a 200x400 div: https://jsfiddle.net/thejonwithnoh/9dndr9r8/
Hard problem: Centering an img within an a within a div
I have div with a given width and height, and an img with an unknown width and height within an a within the div :
<style>
div {
width: ...;
height: ...;
}
</style>
<div>
<a href="...">
<img src="...">
</a>
</div>
A solution which gets pretty close is simply to style the a as such:
a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Here's a couple examples of centering a 500x300 img using this approach:
In an a in a 400x200 div: https://jsfiddle.net/thejonwithnoh/udo957d9/
In an a in a 200x400 div: https://jsfiddle.net/thejonwithnoh/k0nj571f/
The problem here is that the space outside of the img but within the div is now clickable as a link.
The question (tl;dr friendly)
How can I center an img (of unknown size) within a div (of known size), but also have the image be a link?
Edit for clarifications/requirements based on comments:
The answer should only be in html and css (i.e. no javascript)
The answer should not depend on any framework (though framework dependent answers are still interesting in their own right, and I would be curious to see them, but they are not allowed for the "accepted" answer)
The image should maintain its aspect ratio
The image should be contained by the div
If the image is bigger than the div in either dimension, then the image should be scaled so that it fits that dimension
Otherwise, if the image is not bigger than the div in either dimension, then the image should simply be its natural size centered within the div (though I'd be curious to see a solution where the image is scaled up to snugly fit within the div, but they are not allowed for the "accepted" answer)
The area outside the image and inside the div should not be part of the link
A simple way for centering an image (even it is wrapped by <a></a>) within a fixed width/height div container is this:
div {
width: 200px;
height: 150px;
line-height: 150px;
font-size: 0px;
background-color:red;
text-align: center;
}
img {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAEsCAMAAAACZbH6AAAAWlBMVEUAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8nC+k5AAACr0lEQVR42u3VAQkAQAgEQYvYv6YlFIQbCyzcwH+VC7w+P41vDWNBNxZ0Y0EHAh0IdCDQgUDXgK4BXQO6BnQN6BrQNaBrQNeArgEdurGgGwu6saADgQ4EOhDoGtA1oGtA14CuAV0DugZ0Dega0DWgQzcWdGNBNxZ0INCBQAcCXQO6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DugZ0Dega0DWga0DXMBZ0Y0E3FnQg0IFABwIdCHQN6BrQNaBr3KI75xLOs+hPNxZ0Y0EHAh0IdCDQgUDXgK4BXQO6BnQN6BrQNaBrQNeArgEdurGgGwu6saADgQ4EOhDoGtA1oGtA14CuAV0DugZ0Dega0DWgQzcWdGNBNxZ0INCBQAcCXQO6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DugZ0Dega0DWga0CHbizoxoJuLOhAoAOBDgQ6EOga0DWga0DXgK6xi+6cSzjPoj/dWNCNBR0IdCDQgUAHAl0DugZ0Dega0DWga0DXgK4BXQO6BnToxoJuLOjGgg4EOhDoQKBrQNeArgFdA7oGdA3oGtA1oGtA14AO3VjQjQXdWNCBQAcCHQh0Dega0DWga0DXgK4BXQO6BnQN6BrQoRsLurGgGws6EOhAoAOBDgS6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DusYuuou7AR87wv5XXaevAAAAAElFTkSuQmCC"/>
</div>
Setting the divs' ...
- line-height equal to its height combined with an image that has vertical-align set to center, centers the image vertically.
- text-align to center, centers the image horizontally.
I am using a wordpress template to control my website. On the home page is a small header with "Home About Us Contact Us" etc etc and then below that is an image that transitions to another image which transitions to another image. This image is too large for my liking so I am trying to shrink it. So I go to the CSS and adjust the image size, however because there is text on the bottom of the image it is being cut off.
I would like to maintain the image width but just make it a little shorter, say about 75% of the original design.
Below is what I think is the applicable code
.camera_wrap {
height: 672px!important;
max-width: 1920px;
display: none;
position: relative;
z-index: 0;
margin: 0 auto 60px!important;
I added the height: 672px!important; code which makes it about the height I want but again the bottom gets cut off. I would prefer to have the CSS re-size the image instead of clip it. But all of my searches haven't turned up how to do this. I am just finding the re-size attribute.
Try using a path to the img rather than the images class to control the styling for the image.
example html
<div class="image-div">
<img class="image">
</div>
instead of
.image { height: 500px; }
try
.image-div img { height: 500px; }
Also, here's an example of a fiddle and an example in that fiddle of how to affect change to only the second image using nth-child
https://jsfiddle.net/Hastig/g6m5nqc9/1/
.image:nth-child(n+2) {
height: 75px;
}
I got a question: I have an image in a div. the image is bigger that the div and it has height:100% to make it look ok. So when I do a resize image becomes bigger and it looks fine. but when I resize the browser to make it smaller image becomes smaller, but its parent saves the width of the original image. In fact it just takes the width of an image. I got a fiddle for you, just try to resize your browser or the output section to see the red background appear. I'm curious is there any chance to make the div dimenstions the same as the image's dynamically. I need the container dimensions cause I have some other elements besides the image and they use the coordinates of the div. thanks.
important! it works the way I saw it only in FireFox. Chrome's behaviour is different.
.img-wrapper {
display: inline-block;
height: 100%;
position: relative;
background-color: red;
}
.gallery-image {
bottom: 90px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 25px;
background-color: grey;
}
img {
height: 100%;
}
<div class="gallery-image">
<div class="img-wrapper">
<img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>
This is usually done with CSS using background-image:url("http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg").. This way your image and div become one object. Then you just control the div and the background image size accordingly.
Side Note... It helps with performance as well.
You can set the minimum dimensions of an image so it won't become any smaller like this
img {
min-height: 200px;
min-width: 400px;
}