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>
Related
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.
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 recently stumbled upon a problem while coding html and css. I have this img element within a div and I want the div to resize to the size of my img. It's a responsive design, so whenever my img gets smaller, I want my div to resize with it.
Normally it would do this automatically, but since I used "position: absolute" in my img tag, the div height is simply 0.
Html: (note: there's 4 images because I'm creating a slideshow using css3, that's also why I need the position absolute on my img tag)
<div id="cf4a" class="shadow">
<img src="Afbeeldingen/Home/img1.jpg">
<img src="Afbeeldingen/Home/img2.jpg">
<img src="Afbeeldingen/Home/img3.jpg">
<img src="Afbeeldingen/Home/img4.jpg">
</div>
Css:
#cf4a {
text-align: center;
padding-left: 2.5%;
width:95%;
position: absolute;
}
#cf4a img {
max-width: 1160px;
width: 90%;
position: absolute;
left: 1.25%;
}
How would I go and fix this? Thanks in advance.
this is a good tutorial for what you are trying to do,
basically you trick out the css by using a relative position but switching through what portion is viewed, using the overflow hidden property, check it out it is pretty cool!
http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/
I've been trying to horizontally center a wide <img> element inside a <div> which is not as wide as the image itself. And the <div> has overflow: hidden set on it.
For instance, the image is 500px wide and the DIV is 250px wide. Is there any clean way (such that it works for images of any dimension) to center the image such that only the center portion shows up inside the div.
<div class="Container">
<img class="Thumb">
</div>
And :
.Container {
position: /* anything but static */
width: 250px;
}
.Thumb {
position: relative;
width: 500px;
margin: 0 auto;
}
you can add your image as a background using css and give background position to center center.
Since you're expecting a responsive behavior, I would suggest to have (for a simple one)
div {
text-align: center;
}
But using CSS3 and media queries it is possible.
Check this out How to Create a Responsive Centered Image in CSS3
Quick demo
I have a very large wallpaper (1920x1080 - Full HD) on my site, and I want it to center to the middle of the screen, instead of the left side, if the browser window is smaller than the image.
My current markup looks like this:
<div id="wallpaper">
<img />
</div>
And the styles are:
div#wallpaper
{
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
div#wallpaper img
{
display: block;
margin: 0px auto;
}
I'm using an img tag, because I load it async through jquery, and I'm using position absolute on the parent div to ensure it stays out of the page flow. Finally my content is positioned on top of it with z-index higher than 1.
The problem with the above is, when you browser is only 1024x768 you'll just see the left side of the image - I want it to be the middle portion.
Meaning it should crop from both left and right sides, when the wallpaper is larger than the browser window.
Hope all this made sense, otherwise please ask :-)
I'm not sure what you want to do is possible, the way you're doing it.
What I would do is set the image to be the background-image of the wallpaper div, and then set the background position to center the image.
eg.
<div id="wallpaper" style="background-image: foo.jpg"></div>
and in CSS...
div#wallpaper
{
background-position: top 50%;
}