I use Nextjs's Image component. It works great, but it displays space around the image that forces me to apply negative margins on a wrapper to properly align it. Also, it makes the hover effect looks like crap (the user has to put his mouse far away from the image to have an animation exit. It looks buggy.). How to remove the useless space?
Code example:
// image
<div className={styles.wrapper}>
<Image src={pic.src} alt="pic" width={344} height={634} />
</div>
// style
.wrapper {
margin-top: 200px;
width: 100%;
text-align: center;
}
Add this prop to your image and style your wrapper div as you desire:
<div className={styles.wrapper}>
<Image src={pic.src} alt="pic" layout="fill"/>
</div>
Related
I'm trying to understand why, when I use scale, it chops off the top third of the photo, if centered, or if left justified, the top and left edges. I gather it has something to do with the scaling occurring from the mid-point of the img. The code I am using seems trivial having no other content other than the button. What causes this and how does one do it correctly so the entire photo displays within the div?
The intended result is that when you press the "+" button, the scaled photo would remain in the original sized div allowing the user to scroll through enlarged photo.
<head>
<title>Zoom photo</title>
<style>
.largeimage img { transform:scale(2); }
</style>
<script>
function explody() {
document.getElementById("photocontainer").classList.add('largeimage');
}
</script>
</head>
<body >
<div style="overflow:auto;transform-origin: top left;text-align:center;" id="photocontainer" >
<img src="Desktop/graphic/Oliver1950/IMG_0435.jpg">
</div>
<input type="button" onClick="explody();" value="+">
</body>
</html>
That is because the origin of the scale happens from the center (horizontal and vertical center) of the image. If it is located in a <div> close to the top of the page, it will be cut off. If it is located in a <div> that is set to hide overflow, it will also be cut off.
The trick is to either make space around the wrapping <div> to accommodate expanded dimensions of the image, or simply alter the transform-origin property.
div {
text-align: center;
}
div:hover {
transform: scale(2);
transform-origin: top center;
}
<div>
<img src="http://via.placeholder.com/350x150">
</div>
Struggling with the dreaded centring of different sized images in a DIV.
Got a solution from StackOverflow ( How to vertically align an image inside div ), using a <SPAN> as a dummy element (with vertical-align: middle) and it works well except for the images which are bigger than the DIV and these are correctly resized, but shown below the DIV.
If I remove the <SPAN>, then the centring works in the horizontal, but not in the vertical.
If there is a simple change, I can make as I like the simplicity of the solution.
The tests are at
http://mclportal.net/ModalTests.html
This will work for you:
<div id="divModal" style="display:table">
<div id="divImage" style="display:table-cell; vertical-align:middle">
<img id="img" src=".........">
</div>
</div>
You should put max width and max heights on your images. Then just use relative positioning of the images inside a div with a relative position. for instance...
<div style="height: 300px; width: 300px; position: relative; text-align: center;>
<img src="#" style="max-width: 200px; max-height: 200px; position: relative; top: 50px; />
</div>
Using an approach like this all images will be vertically aligned with each other and centered within their div container. Plus having max height and width set will allow the image to keep its aspect ratio.
#mcl not sure if you've managed to resolve your problem yet.
If not checkout out my blog post centering large images in smaller containers their is also a codepen demo on there.
I had the same issue and managed to get it working without any need of javascript or inline styles.
Hope it helps
I'm trying to get the CSS for a Pin Style right. I'm trying to get the exact Pinterest Pin Style, that means that the image is filling the container/box and below there are the stats...
The Image below shows a Pinterest Pin that i'm trying to make. Does anyone know the Css that is required for the image to Fill the container/box ?
Thank you
You just need to make sure your image is the same width as its container element. Set the width on your container to the same width as your image and make sure there is no padding in your container or margins on the top or sides of your image.
<div class="container">
<img width="200">
<div class="meta">
text
</div>
</div>
.container { width: 200px; padding: 0; }
.container img { margin: 0; }
Pinterest's code gets a bit more complex but you can always use an inspector to see what they're doing specifically.
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.
So i have a couple of tag, and i have some text and images i'd like to center or align to the bottom inside of them. Vertical-align doesn't seem to be in the mood to work.
I'd also like to make a horizontal menu, which will have a start image (say, menutop.png), a filler (menubg.png) and a closing block (menubottom.png), and i'd like for the bottom closing block to automatically place itself at the end of the menu, no matter how long it happens to be.
Thanks!
This calls for absolute positioning in CSS. First you need to give the parent DIV a position value (relative or static at least).
Then, the images and text you want to align to the bottom you need to make position: absolute, and bottom: 0px.
The horizontal menu should be 100% width (display: block also works), and the closing block placed inside. Absolutely position the closing block, and give it "right: 0" so it is always to the right.
I solved it like this:
<div id="menu">
<img src="img/menutop.png" />
<div id="menucontent">
stuff goes here
</div>
<img src="img/menubottom.png" />
</div>
CSS:
#menu
{
width: 335px;
height: 100%;
float: right;
border:solid black 1px;
}
#menucontent
{
background:url(img/menubg.png) repeat-y;
width: 100%;
}
Thanks for the pointers though :)
Try this with the element you want to center something else within:
div {
display: table-cell;
vertical-align: center;
}
(Not sure if this works in every browser, but I'm fairly sure it does in Firefox and IE8 at least)