So I want to write some css so I can make a preset div size that I can put the pictures in. Even if the picture is bigger than the div i would like to make it show only what the div can show you. So kinda like cropping it or something. I want to make a little thumbnail that you can click on and see the whole picture. I have no idea where to start. Please help. Thanks!
you can do something like:
div {
width: 300px;
height: 300px;
overflow: hidden;
}
the width and height will prevent the div from automatically re sizing, and overflow: hidden will hide (or crop) everything that excedes the div's boundries
this JSFiddle will show you how the JS, and CSS are really simple...
http://jsfiddle.net/ProgrammerKid/bh2dz8Lq/
(make sure that you look at the css... it is awfully simple)
#divId{
width: xpx;
height: xpx;
}
#imgId{
margin-right: auto;
margin-left: auto;
}
#imgId:hover{
width: 100%;
}
The image will shrink to the size of the div when you hover over it.
.yourDivClass {
height: #px;
width: #px;
}
.yourDivClass img {
margin-left: auto;
margin-right: auto;
}
This will create your fixed size div, and then center your image inside the div, with only the size of your div being visible of the image.
Related
I'm attempting to create a simple responsible logo inside of a navbar. I've recreated the problem with this codepen.
Essentially I have a .logo wrapper around an <svg> logo:
#navbar .logo {
height: 80px;
}
#navbar .logo svg {
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
padding: 20px 0;
}
At around 500-600px in width you can see that the SVG element box is much wider than the actual logo. I can fix this by removing the height rule on the .logo div. But then the SVG goes beyond 80px in height.
How can I constrain the navbar height to 80px and maintain the actual width of the SVG so that the logo remains flush against the left side of the container?
If I replace width: 100%; with width: auto;, the logo flushes to the left like I want, but then the .logo div is much larger than the SVG.
I'm not sure if this is what you wanted. I set a max-width to the div .logo and made the width of the svg to 100%.
Check this out: https://codepen.io/samuellawrentz/pen/LBzRwM?editors=1100
I got a question: I have an image in a div. the image is bigger that the div and it has height:100% to make it look ok. So when I do a resize image becomes bigger and it looks fine. but when I resize the browser to make it smaller image becomes smaller, but its parent saves the width of the original image. In fact it just takes the width of an image. I got a fiddle for you, just try to resize your browser or the output section to see the red background appear. I'm curious is there any chance to make the div dimenstions the same as the image's dynamically. I need the container dimensions cause I have some other elements besides the image and they use the coordinates of the div. thanks.
important! it works the way I saw it only in FireFox. Chrome's behaviour is different.
.img-wrapper {
display: inline-block;
height: 100%;
position: relative;
background-color: red;
}
.gallery-image {
bottom: 90px;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 25px;
background-color: grey;
}
img {
height: 100%;
}
<div class="gallery-image">
<div class="img-wrapper">
<img src="http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg" alt=""/>
</div>
</div>
This is usually done with CSS using background-image:url("http://www.ibm.com/big-data/us/en/images/bigdata_homepage_maininfographic_345x194.jpg").. This way your image and div become one object. Then you just control the div and the background image size accordingly.
Side Note... It helps with performance as well.
You can set the minimum dimensions of an image so it won't become any smaller like this
img {
min-height: 200px;
min-width: 400px;
}
I've created the following demo to show my issue:
http://francisbaptiste.com/nov17/
Each div is 33.33% wide. Within the div is an image with 100% width. I want it to be a perfect grid of images, but the height of the div is always a little more than the height of the image.
Shouldn't the height of the div be set by the height of the image within it? So why is there that little bit of space at the bottom?
The gap is coming from the actual whitespace after the image tag. You can use this to fix it:
.card img {
display: block;
}
Fiddle
Or a more hacky solution:
.card {
font-size: 0;
}
Fiddle
I thinks the problem is the height of outer div, you cannot use auto since the browser may have some default action for the div and its inside content. Instead, I specify the percentage of height and solved the problem
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
Does that make sense to you?
I have the following piece of code:
.goplots {
height: auto;
width: auto;
max-height: 50px;
float: left;
}
and this HTML code mixted with a MediaWiki image:
<div class="goplots">
[[File:{{PAGENAME}}-CC.png|Cellular components]]
</div>
The problem is that the image is resized only when modifying the width value. It does not apply the height or max-height. I tried everything without success. What is going on?
Add this
.goplots img {
max-height: 100%;
}
You need to apply max-height to the contained img as well, this will make it shrink in height if necessary while keeping its proportions to fit in its container .goplots.
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/