I have been making a web landing page for my app, but it keeps squishing the landscape image and thinking its portrait. I want the div to auto adjust for the picture so if the height is greater than the width then the div should adjust to the image's size. How could I go about doing that.
Sample of the Code I am using to display the images:
<div id="favphoto">
<a href="/event/%event%/photo/%id%.jpg" target="_blank">
<img border="0" src="/event/%event%/photo/%id%.jpg" />
</a>
</div>
I want to make the div auto size to the correct image that gets called, if not am I just going about this wrong.
Setting the div to display:inline-block will cause it to be only as wide as the contents.
JSFiddle Example
<div class="favphoto">
<a href="#" target="_blank">
<img border="0" src="http://lorempixel.com/400/200/sports/" />
</a>
</div>
<div class="favphoto">
<a href="#" target="_blank">
<img border="0" src="http://lorempixel.com/200/400/sports/" />
</a>
</div>
.favphoto {
display:inline-block;
vertical-align:top;
}
.img {
display:block;
}
Related
<div className="row align-items-center justify-content-center">
<div className="col-md-3 mt-3">
<div className="card bg-light">
<div className="card-img-top">
<Image
src="/character1.png"
alt="Picture of the author"
layout="fill"
/>
</div>
<div className="card-body">
<h5 className="card-title">Emirhan Sirkeci</h5>
<p className="text-muted">Developer</p>
<div className="d-flex justify-content-center">
<a href="https://github.com/justChargin" target="_blank">
<Icon icon="akar-icons:github-fill" />
</a>
<a href="https://www.instagram.com/username/" target="_blank">
<Icon icon="akar-icons:instagram-fill" />
</a>
<a href="mailto:emirhansirkeci8#gmail.com" target="_blank">
<Icon icon="cib:gmail" />
</a>
</div>
</div>
</div>
</div>
I replaced normal html element with next/image component. But im facing with responsive issues. Check out the screenshot below.
As you can see, Image component is top of the card-body. How can i place my Image component like others? When i give Image component fixed width and height properties, its stop being responsive. I also tried giving it width height properties that include "100%" value
next/image is rendered inside a span with absolute position. That's why it is overflowing the card-body.
You can fix it by adding some CSS to the card-img-top like the following example:
.card-img-top {
position: relative;
height: 200px;
}
Or you can override some CSS properties for the rendered next/image HTML elements:
.card-img-top span,
.card-img-top span img {
position: static !important;
}
.card-img-top span img {
height: auto !important;
}
Stackblitz example
Used this code around every image
<div class="side-by-side"> <a href="http://example.com ....> (include ALL the code for the image here) </div>
This is the CSS snippet
.side-by-side { float: left; margin-right: 5px }
It works... I mean images are on one line
But unfortunately the images align left, and I want them centered, all together.
Wrap your images in a div and set the text-align:center; then you dont need the extra div to wrap your a tags in you can just style the a tag itself. Like so:
<div class="centered-content">
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
</div>
And Css:
.centered-content{
text-align:center;
}
.side-by-side{
margin-right:5px;
display:inline-block;
}
I would use Flexbox to do it. Wrap your div in a container
<div class="container">
<div class="side-by-side">
</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
HTML :
<a href="">
<img class="center" src="">
</a>
CSS :
.center { display: block; margin: 0 auto; }
That centers the image, but the problem is any extra white-space around the image is also clickable. Is there a way to fix that?
(Images vary in size)
You could just wrap a div around it and center the that div rather than the image itself.
<div class="center">
<a href="">
<img src="">
</a>
</div>
And then add a style definition for the div.
.center { margin: 0 auto; }
The only option I see would be putting the anchor in a div (non -clickable, with the size and style of your current anchor) and sizing the anchor based on the image:
HTML:
<div class="container">
<a href="" class="anchor">
<img src="http://placehold.it/350x150" />
</a>
</div>
CSS:
.container {
width: 100%;
text-align:center;
}
JSFIDDLE:
http://jsfiddle.net/Atumra/0jncgxkb/
How about doing this
<a href="" class="center">
<img src="">
</a>
Still brand new to CSS, so please be gentle ;). I have a grid setup like the following:
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
</div>
The problem is when I actually fill the src with an image, I want the image to actually compeltely "fill" the placeholder no matter what the image size is. I guess in other words, a ratio should be applied so it fills the 150x150? The width (max-width: 100%) is fitting, but the height is auto. I've tried adjusting height, width, max-height, etc. with no success.
I'm also new to bootstrap. I must have been messing with this longer than I should have but basically here is what I found works
You want to have a custom stylesheet that you load after bootstrap's css so you can make custom adjustments without destroying the original css. You can then make the adjustments:
.thumbnail-image {
overflow: hidden;
height: 150px;
}
.thumbnail-image > img {
width: 100%;
}
So then I sandwiched the image inbetween a div with the "thumbnail-image" class in the HTML.
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
</div>
As column sizes adjust at the breakpoints you would have to do some similar adjustments regarding the custom height property of the custom .thumbnail-image class but other than that this is what I came up with!
Try adding height and width attributes within the image tag like so:
<img src="..." height="150" width="150">
Not sure how this'll interact with bootstrap's responsive image class. Best practice would be to actually insert an image which has the correct dimensions.
I don't always do web development, but when I do CSS is the most frustrating thing I can imagine. I'm trying to create a simple class to hold an image together with description. I want to have two rows, each with three images. Very simple.
Here's my code for displaying images only, which works ok.
img {
position: relative;
margin: 0 auto;
max-width: 650px;
padding: 5px;
margin: 10px 0 5px 0;
border: 1px solid #ccc;
}
<h3>Screenshots</h3>
<p>
<img src="images/img1.png" width="200" height="140">
<img src="images/img2.png" width="200" height="140">
<img src="images/img3.png" width="200" height="140">
<img src="images/img4.png" width="200" height="140">
<img src="images/img5.png" width="200" height="140">
<img src="images/img6.png" width="200" height="140">
</p>
<h3>Installation</h3>
This shows images exactly as I want, three in each row and then there's a padding from < p > and then Installation section. To get description under images in the same div I changed img in css to div.img and htm code to:
<h3>Screenshots</h3>
<p>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
<div class="img">
<a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a>
</div>
</p>
<h3>Installation</h3>
One would have thought that the resulting webpage is going to be exactly the same as img in the first case and div.img in the second have the same attributes. It is not the case though. With this code I get each div stretched to the full width of the column and images are one under the other at the left side of the div.
I have also tried this code: http://www.w3schools.com/CSS/css_image_gallery.asp, but in this case I get Installation and all the text that follows go onto the images, ignoring < p > tag which has bottom margin.
To keep it simple: replace your divs with <span> elements, or set display: inline on your CSS for the divs. This will make them behave as you expected (as inline, not block elements).
Also:
You don't need the margin: 0 auto. It won't center inline elements as it does with block elements
You added position: relative, but don't seem to need it, either. Unless you intend to apply absolute position to something inside the div at a later point.
Here is a jsfiddle without these two properties, and adding display: inline to the divs: http://jsfiddle.net/3BwKY/.