I'm trying to make 3 <div> boxes with a fixed height and width of 500px;
I'm trying to take 3 different images and have them fit inside the <div> boxes
I've tried to fit an image off tumblr lets say, or imgur and most images will fit to a random size, but some don't stretch the full of the <div> box.
So I have;
<div class="row">
<div class="col-md-4 portfolio-item">
<div class="caption">
<div class="caption-content">
<i class="fa fa-search-plus fa-2x">tstmkr</i>
</div>
</div>
<img src="http://goo.gl/2GDUPT" class="img-responsive" alt="" />
<!-- </a> -->
</div>
</div>
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 20px;
color: #fff;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
margin-top: -12px;
}
Don't put the image in the <div> directly.
Put it as a background-image, than set background-size: cover;
This way, the image will stretch to cover full <div> box, as you want.
You need to apply width:100% to your img tag if you want it to take up 100% of its parent.
style="width:100%;"
Or give it an id and create a width:100% for it in the style sheet.
http://jsfiddle.net/jGyr2/
Is that what you are looking for?
Based on what you have asked it actually sounds like this fiddle here demonstrates what you are wanting
http://jsfiddle.net/jGyr2/1/
Related
In the code below, I have an image card with a hover effect. On hover, I'd like the black box to cover the complete image by default. In the code below, the black box does not cover the complete image unless the title or description text wraps two a second line.
What is the best way to get the black box to fill the complete width of the parent element ".page-card" even without content inside of it? I have tried:
width: 100%, flex direction, clears, table hacks, and many other tips I found without any luck. Any help would be appreciated.
Quick note: for .page-card figcaption I'm using an image on the site so the cover properties are needed.
.page-card {
overflow: hidden;
text-align: left;
margin-top: 30px;
}
.page-card a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
.page-card * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.page-card img {
object-fit: cover;
width: 100%;
}
.page-card figcaption {
position: absolute;
top: calc(77%);
height: 100%;
background-color: black;
/* the site uses an image here I filled it with black for the code snip */
background-size: cover;
border-top: 1px solid #333;
margin-right: 15px;
padding: 35px 25px 65px;
color: white;
}
.page-card:hover figcaption,
.page-card.hover figcaption {
top: 0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!--Example 1 not spanning dark hover color 100% width-->
<div class="row d-flex flex-row">
<figure class="col-md-6 col-xl-4 page-card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample45.jpg" width="880" height="640">
<figcaption>
<h1>Title</h1>
<p>Descrition</p>
<button type="button" class="btn btn-outline-light itm-space">Learn More</button>
</figcaption>link
</figure>
</div>
<!--Example 2 does cover 100% width when text wraps to a second line-->
<div class="row d-flex flex-row">
<figure class="col-md-6 col-xl-4 page-card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample45.jpg" width="880" height="640">
<figcaption>
<h1>Title</h1>
<p>Descrition Text that continues to wrap to a second line and fills the complete width like I want it to by default</p>
<button type="button" class="btn btn-outline-light itm-space">Learn More</button>
</figcaption>
</figure>
</div>
</div>
You need to give to give to the "hover" div width :100%:
.page-card figcaption {width:100%}
When an element is given position:absolute is no longer a "block" element with default widh 100%.
Once you do it, you may notice it takes more room than the image below. That is becouse the image parent has padding and you are not using the rule box-sizing:border-box If you add this to the top of you css sheet it should solve your problem.
* {box-sizing:border-box}
Adding:
.page-card figcaption {width:100%}
resolved the width issue but created 30px of overflow because the parent elements padding was not being respected with absolute positioning.
.page-card figcaption {clip-path: inset(0px 30px 0px 0px)}
The code above will clip the overflow.
I have issues with my text over my images. The text I have is working when it's in desktop, at least on my computer resolution. But the issue is when I scale it back it doesn't keep up with the images so to say. Any idea how to do so or what is wrong?
HTML:
<div class="col-4 text-center image-capsule mx-auto">
<section class="posters-section">
<a href="/" class="movie-link pop">
<p class="poster-date">Test</p>
<img class="img-fluid poster" data-toggle="popover" src="${app.movie[0].poster}">
</a>
</section>
<h5 class="mt-3">${app.movie[0].title}</h5>
</div>
CSS:
.image-capsule {
width: 33%;
position: relative;
}
.posters-section {
position: relative;
}
.poster {
position: relative;
}
.poster-date {
margin: -5% 26%;
font-weight: bold;
z-index: 100;
background-color: #9c0000;
position: absolute;
width: 51%;
text-align: center;
}
I had an issue similar to this. I fixed this issue by using bootstraps text-center class on the text. This kept them centered in the div holding the picture which kept them together with a picture. Here is an example of what I did.
<div class="margin-intercept shrink-to-necessary-size">
<a href="350_project.html">
<img src="images/IMG_2579.JPG" width="350" height="350">
</a>
<h3 class="picwidth text-center">350 Project</h3>
</div>
This made the text stay centered under the image no matter how the screen shrunk.
I have an image in which I need to put a button over, the problem is that I don't know how to place the button and automatically re-size and position it when making the browser smaller, right now I have the button in place, but when I re-size the browser to get smaller the button moves, I tried using percentages in the css buy doesn't work, what can I do?
<div id="discover" class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 withimg">
<img id="discoveryour" src="img/x.png" class="img-responsive">
</div>
</div>
<div class="row-fluid">
<div id="bttnimg" class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
<form id="start" method="post" action="x.php">
<button class="btn-primary">text</button>
</form>
</div>
</div>
</div>
Css:
.withimg {
width: 100%;
overflow:hidden;
padding: 0px;
margin: 0px;
}
#discover{
position: relative;
}
#bttnimg{
float: left;
position: absolute;
left: 62%;
top: 25%;
max-width: 750px;
}
Ah, the good old "how to overlay stuff on top of a responsive image -- responsively" question.
A little tricky, but not too bad. The tricky bit is how to make the stuff's vertical position responsive when the image size changes.
Fear not, here's one simple way to do this:
HTML:
<div class="img-wrapper">
<img class="img-responsive"
src="http://lorempixel.com/output/people-q-c-1200-400-4.jpg">
<div class="img-overlay">
<button class="btn btn-md btn-success">Button</button>
</div>
</div>
CSS:
.img-wrapper {
position: relative;
}
.img-responsive {
width: 100%;
height: auto;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.img-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
height: 50%;
}
The img-overlay:before pseudo-class handles the vertical positioning job by pushing the img-overlay div down from the top of the image. In this example, the top of the button will always be 50% down the image (change the height: 50% attribute if you want the button higher or lower).
jsfiddle
To make the button size responsive to window width, you can create a new class for your button. Let's call it btn-responsive (this replaces btn-md in the example above). Then use #media queries to adjust the btn-responsive attributes for different window widths. Something like this:
.btn-responsive {
/* matches 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
#media (max-width:760px) {
/* matches 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}
and so forth for other screen widths.
In case you're wondering how to do this with bootstrap 5 (like me), there are new classes that do the trick. For instance, I did this to put a button floating right top over the image (I also use font-awesome but you can use any text/icon you like for the button):
<div class="card">
<img class="card-img-top img-thumbnail" src="someimage.png" alt="alt text">
<div class="card-img-overlay">
<a href="#" class="btn btn-outline-warning btn-sm float-end"
data-bs-toggle="popover" data-bs-content="Edit image" data-bs-trigger="hover focus">
<i class="far fa-edit"></i>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Some title</h5>
<p class="card-text">Some text</p>
</div>
</div>
Check out the official bootstrap documentation for more info.
I have to ask if there's a possibility to replace form tag into another DIV? Then you can just use position: absolute for button. I created fiddle to show how https://jsfiddle.net/1x1pjwk7/
First, here's an example I'm trying to achieve:
Here's the code I'm using to achieve that
HTML:
<div class="card demo-card-header-pic" style="margin:15px;">
<div style="background-image:url(https://pbs.twimg.com/profile_banners/6253282/1431474710/web_retina)" valign="bottom" class="card-header color-white no-border"></div>
<div class="avatar">
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_bigger.png" style="border-radius:50px;">
</div>
<div class="card-content">
<div class="card-content-inner">
<div>
<p><b>****</b> wants to know what you think of him!</p>
</div>
<div>
<span class="text-muted" style="float:left;">Asked two days ago</span>
<span style="float:right;" class="text-muted"> 5 comments</span>
</div>
</div>
</div>
<div class="card-footer">Footer</div>
</div>
CSS:
.demo-card-header-pic .card-header
{
height: 40vw;
background-size: cover;
background-position: center;
}
.avatar
{
border-radius: 50px;
}
.card > .avatar
{
position: relative;
top: -40px;
left:5px;
}
.text-muted {
color: #777;
}
My question is how do I get rid of all the white space that is between the header of the card and the text? I tried using position:absolutebut that would mess up anytime the display was changed, even when using percentages.
A quick solution would be to give .card-content a negative margin-top value. I do agree that it's not the most elegant solution, but it get's the job done. Also adding a clear:both to the footer will prevent the overlay of both DIVs that you have at the moment
CSS:
.card-content{
margin-top: -40px;
}
.card-footer{
clear: both;
}
just remove margin form your main div and also if you want to remove body default white space then use following css on body
body{
margin:0;
padding:0;
}
So I have this issue with positioning and aligning thumbnails. I want to put fixed width and height on a div but as I am using Bootstrap, I've put col-md and col-xs for responsiveness, and now I can't figure out how to fit every image no matter how big it is to be a fixed width and height. Ive tried percentage and px, but then it loses its mobility and responsiveness and stays fixed on that width. Here is a picture of the problem http://postimg.org/image/n4tnblczd/ . I would be very thankfull on some advice how to resize big pictures to fixed width and heights but to remain it's responsiveness.
Before asking question suggest as giving your sample code. I think you want to know the process of html structure.
Use below html code for bootstrap support. col-md and col-sm in div class. img class will be "img-responsive" . It will get bootstrap.min.css
<div class="col-md-6 col-sm-6 col-xs-12 text-left">
<img src="/images/choose-us.png" class="img-responsive">
</div>
Use this I think it will solve your problem.here is screenshot I applied using my css with different image size.
Below snippet code not displaying exact style because of bootstrap css link.
.thumbnail{
padding: 0px;
border-radius: 0px;
position: relative;
border: 1px solid #222;
}
.thumbnail img{
height: 347px;
}
.drzac{
margin-top: 30px;
}
.overlay{
display: block;
transition: all 0.3s;
-webkit-transition: all 0.3s;
background-color: rgba(50, 200, 235, 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
font-size: 2em;
text-align: center;
}
<div class="col-xs-6 col-md-4">
<div class="thumbnail">
<img src="http://www.it4gen.com/wp-content/uploads/2013/02/learnindoorgrowing.com_-460x345.png" class="img-responsive">
<div class="centered"><i class="fa fa-search"></i></div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="thumbnail">
<img src="http://www.totalcableusa.com/images/choose-us.png">
<div class="centered"><i class="fa fa-search"></i></div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="thumbnail">
<img src="http://www.totalcableusa.com/images/choose-us.png">
<div class="centered"><i class="fa fa-search"></i></div>
</div>
</div>