I am trying to get a square to have a limited size and stay within the bounds of the parent div and scale cleanly. I can get one or two of these, but not all.
Setup is I have a main div, two column divs on the left, and a div that takes up the remaining space on the right. I would like the div on the right to contain the square and the bounds of the square stay within the parent div. I can get it to stay put if I don't use the padding-bottom to keep it square, but then the pic of the item looks horrible.
Take a look at my js bin. The pathway to hit the square is:
Weapons -> item b1 -> click on it to make it stay
The padding-bottom pushes it way down and outside of the parent div and blows the bottom out of the whole thing.
css
.itempanel{
display: block;
align-items: center;
position: relative;
}
.itemcontainer{
position: relative;
top: 30%;
height: 60%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.itemdisplay{
display:none;
flex-direction: column;
width: 60%;
padding-bottom: 60%;
margin-left: auto;
margin-right: auto;
position: relative;
align-items: center;
overflow: hidden;
}
/* .itemdisplay::after{
content: " ";
display: block;
padding-bottom: 100%;
} */
html
<div class="itempanel">
<div class = "itemcontainer">
<div id="itemdisplay" class="itemdisplay">
<img id="itemimg" class="itemimg" src=""></img>
<div id="itemdesc" class="itemdesc">
<div id="itemtitle" class="itemtitle"></div>
<div id="itembody" class="itembody"></div>
<a id="itemclick" class="itemclick" href="">Click To Place Order</a>
</div>
</div>
</div>
</div>
Thanks for any help!
*little bit of background - girlfriend wants a skyrim wedding so building out a website for rsvp and stuff. Belethor's shop is going to be setup to help those not so nerdy shop for cheap cosplay outfits. Everything else works just like I want it, but the itempanel/itemcontainer/itemdisplay is not in the display area how I want it.
figured it out. The psuedo element has to be opposite what padding you are using. For instance, using this worked like I expected it to. it's always the simple things...
.itemdisplay::after{
content: " ";
display: block;
padding-top: 100%;
I see that you have created a class .bottommenu but I don't see it being applied anywhere on your HTML or JavaScript. If you want to display two rows using Flex-box and you are not quite sure of the height of your images or content, you could set that parent container to have a height: auto and on your child container you could use the align-self: flex-end to handle the positioning of items, and on your parent use the justify-content or align-content to your liking. Something like this:
div .parent {
display:flex;
height: auto;
min-width: 300px;
}
div .child {
align-self: center;
width: 100%;
min-height: 50%;
height: auto;
margin: 0 auto;
}
Hope that helps.
This is what I have right now:
It looks good only when photos are of big resolution and mostly landscape.
This is my HTML and CSS:
<div class="upload-thumb ng-scope visible">
<span class="delete-media">
<span class="icon-bin">
</span>
</span>
<img src="">
</div>
.upload-thumb {
cursor: pointer;
overflow: hidden;
float: left;
width: 44%;
/* height: 72px; */
margin: 0 11px 10px 0;
position: relative;
}
.upload-thumb img {
width: 100%;
height: inherit;
}
This is how it looks if I remove fixed height:
Photos are not scaled, but I would like to have them not scaled and placed in a fixed size container as in my first screen. I know that part of the image might be cut, but I am aware of this. How this could be done?
You could do this with css overflow: hidden. Set the dimension you want scaled on the image width, and the dimension you want to crop on the containing div with overflow hidden: Plunkr: https://plnkr.co/edit/AzoaVufPDioGHQHk4RhG?p=preview
CSS
.tmb {
width: 200px;
overflow: hidden;
}
.tmb img {
height: 100px;
}
Html:
<div class="tmb">
<img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>
Your other option is to use background images and positioning/sizing.
See this article it explains both methods well:
How to automatically crop and center an image
I have two <div>s with absolute position. One is displayed and the other is display: none on load. When the link on the visible one is clicked it is moved and the other is displayed.
I have a third <div> with link that I would like to display directly below these. Since they’re both position: absolute I have not been able to find a way to do this. I have found various solutions, but most of them are workarounds for using absolute position. Since my <div>s need to show ontop of each other I unfortunately can’t remove the absolute positioning.
As such I have tried various combinations of position: absolute and position: relative on the three <div>s, but so far nothing has worked.
JSFiddle with my problem: https://jsfiddle.net/dagz9tLw/1/
<div> with id linkbar is the one that needs to be at the bottom.
The other two <div>s don’t have a set height so margin-top won’t work. linkbar also needs to be just below the <div>s and not right at the bottom of the page.
I experienced that using a div acting as a buffer is quite useful and easy to implement for this purpose. You just set it above your div#linkbar and adjust it's height on load and when the div#front get's repositioned:
$("#topBuffer").css("height", $("#front").offset().top + $("#front").height());
$("#showLink").click(function() {
if (!$("#back").is(":visible")) {
$("#back").show();
$("#front").animate({
'marginLeft': "+=30px"
});
$("#front").animate({
'marginTop': "+=20px"
});
$("#topBuffer").animate({
'height': "+=20px"
});
}
return true;
});
.front {
width: 400px;
display: block;
border: 2px solid #000000;
text-align: center;
position: absolute;
margin-top: 20px;
z-index: 10;
background-color: white;
}
.back {
display: none;
width: 400px;
border: 2px solid #000000;
text-align: center;
position: absolute;
z-index: 1;
margin-top: 20px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front" class="front">
<a id="showLink" href="javascript:void(0);">front</a>
</div>
<div id="back" class="back">
back
</div>
<div id="topBuffer"></div>
<div id="linkbar">
test
test
test
</div>
Hello on my page i have 2 character images, that i have placed on both sides of a text and banner, heres a picture of it http://i.imgur.com/KwzphQP.jpg but heres the problem, when i rezise my browser the images follows with the browser, they do not stay in the same position, and i dont want this to happen because i have a fixed layout, heres the css code, i dont know how to post it good, but anyway
.support-text {
width: 600px;
margin-left: auto;
margin-right: auto;
line-height: -2px;
margin-bottom: 130px;
}
.support-text h1 {
font-size: 30px;
}
.support-text {
clear: left;
}
.support-text {
font-size: 23px;
}
.support-img {
margin-top: -80px;
margin-bottom: 80px;
z-index: 1;
}
.ct-pic {
position: absolute;
right: 10px;
bottom: 30px;
float: right;
}
.ct-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic {
position: absolute;
left: 40px;
bottom: 30px;
float: left;
}
heres the html
<section class="support-text">
<div class="ct-pic"> </div>
<div class="t-pic" width="867" height="569"></div>
<img src="img/support-us.png" class="support-img">
<p>Hello, if this site has helped you improve your gameplay, and learn useful stuff, feel free to support us, so we can keep this website up, so more people can learn. You can support through Steam or throught paypal. Keep in mind that you do not have to support, but if you do, we appreciate it alot. and we can continue to upload new content (Smokes, flashes, tactics) to the website. </p>
</section>
heres an example of how to position things next to each other without them moving away or changing positions when you resize the window (the divs can be img tags or whatever you want them to be). Just put them in a "container" with a fixed width, and then float them inside that container
<div id='container'>
<div id='image-1' class='image'></div>
<div id='image-2' class='image'></div>
<div id='image-3' class='image'></div>
</div>
#container {
width: 200px;
height: 100px;
background: black;
}
.image {
background: white;
width: 20px;
height: 20px;
float: left;
margin: 20px;
}
http://jsfiddle.net/7qytj718/1/
update
you have an issue with your css. You're setting child elements' positions to absolute, this makes them ignore their parent element and become positioned relative to the entire window. When this happens, the child elements start moving when the window is resized.
I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
http://jsfiddle.net/HsE6H/
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
Not sure why I can't get it to work, do I need JavaScript for this?
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)
Auto-sizing Images to Fit a Div - Making the CSS Work
Here is one way of doing it, start with the following HTML:
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
jQuery Helper
You can use the following jQuery action to determine which class to set based
on the aspect ratio of the image.
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<height and then set the appropriate class.
Also, I added a check to take into account the aspect ratio of the containing block.
Before, I had implicitly assumed a square view panel.
For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.
Taking out the line: max-width:100% in your CSS file seems to do the trick.
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/
Here is another solution I found, that no need to seperate portraid or landscape or scripting.
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
https://jsfiddle.net/efirat/17bopn2q/2/
Background can do this
set image as background
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You should try this:
img {
min-width:100%;
min-height:100%;
}
I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
https://github.com/johnpolacek/imagefill.js/
It works if you add the following to the parent div for img styling;
https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
This could do the job:
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}
We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.
Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:
.container {
margin: 10px;
width: 125px;
height: 125px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
The key is in using line-height and setting the container to do the same.
I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}
Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.
Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!
The following solution is very short and clean if you need to insert img tag into div tag:
.container, .container img
{
max-height: 300px;
max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>
Also, if you don't need to use a div you can just write an even shorter css:
img
{
max-height: 300px;
max-width: 240px;
}