anyone know how to solve this problem:
The image of the example overboard the image-wrapper that contain it.
It works correctly if it's smaller or change "max-height:40vw" to "height:40vw", but both solutions are bad for me.
What I'm trying it's to get that image responsive in different resolutions ( desktop to laptop, for mobile I have a different design ), like here: http://goo.gl/yRo5OE (deviantart)
The website where I'm trying to implement: http://goo.gl/AAF4U7
Thank you, if you have another solution for this please tell me.
.image-wrapper {
display:flex;
justify-content:center;
max-height:40vw;
background:#141414;
}
.image-wrapper img {
height:100%;
width:auto;
}
<div class="image-wrapper">
<img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>
just remove the height:100% from css
.image-wrapper {
display:flex;
justify-content:center;
max-height:40vw;
background:#141414;
}
.image-wrapper img {
width:auto;
}
<div class="image-wrapper">
<img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>
Please see if the following helps-
img{max-width:100%; width:auto; vertical-align: top;}
OR
http://jsbin.com/guwicolora/edit?output
Related
I've searched on a lot of topics and I didn't found the solution...
I'm just trying to scale my image to fit into my div but it isn't.
HTML :
<div class="slideshow-image slideshow-active">
<img src="assets/images/securityBreach1.png">
</div>
CSS :
.slideshow-image {
text-align: center;
display: none;
overflow: hidden;
margin: 0 auto;
}
I've already tried to play with max-width/height, width/height and object-fit:content but nothing seems work.
Here's the website page if you want (see the slideshow part) :
Thank you in advance !
Have you tried adding the following?
.slideshow-image img{
width:100%;
height:auto;
}
Does that help?
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-right:20px;
height:180px;
width:62%;
margin:auto;
}
.im1{
height:180px;
width:200px;
}
<div id="one">
<img src="inspirational1.jpg" alt="picture1" class="im1"/>
<img src="inspirational2.jpg" alt="picture2" class="im1"/>
<img src="inspirational3.jpg" alt="picture3" class="im1"/>
<img src="inspirational4.jpg" alt="picture4" class="im1"/>
<img src="inspirational5.jpg" alt="picture5" class="im1"/>
</div>
The code above woks perfectly when I'm working im my desktop, but as soon as I open in my laptop all the images are all over the place. I would like to fit them in the div making sure they don't go everywhere if open the website in a new browser, or scree. Any advice is more than welcome please
http://jsfiddle.net/LYL2S/1/
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding:20px;
margin:auto;
width:620px;
}
.im1{
height:180px;
width:200px;
}
If I understood right you can use float instruction for your images
in css add this line:
#one img { float:left; }
where #one is the the container div
or using class on the images:
im1 {float:left;}
and after your container add a div with class .clear where clear {clear:both;}
Since your saying just for css.. you can't do it dynamically like if the number of images change..
However with just css and a fixed amount of images, like the 5 you showed in your question, you can just use percentages instead , like this
.im1 {
width: 19%;
}
Because 100% width of parent / 5 images = 20% , but sometimes you want to set a little lower to make sure some browsers don't render it incorrectly, so they all fit on the same line.
Also, since your using an id #one for the parent, you might need to use
#one .im1 {
width: 19%;
}
instead
I have this current code:
CSS:
img
{
max-width:15vw;
max-height:15vh;
position:relative;
background-color:#67615d;
display:inline-block;
text-align:justify;
}
#container
{
width:80%;
min-height:100vh;
margin:0px;
float:right;
margin:0px;
overflow:hidden;
}
#navbar
{
background-color:#67615d;
width:20%;
height:100vh;
overflow:hidden;
position:fixed;
float:left;
}
#content
{
width:100vw;
min-height:100vh;
margin:0px;
padding:0px;
overflow:hidden;
background-color:#9d948f;
}
HTML:
<html>
<body>
<div id="content">
<div id="navbar">
*stuff in the navbar*
</div>
<div id="container">
</div><img src="pic1"></img>
</div><img src="pic2"></img>
</div><img src="pic3"></img>
</div>
</div>
</body>
</html>
Anyway, with this as my current code (add a few more things) and it looks like this:
http://i.imgur.com/9WTUNtj.jpg
These pics are just random screenshots and the others are random pictures (obviously just for testing purposes, the real thing will have pictures of all resolutions) I got off of google. Anyway, what I am trying to do is automatically adjust the pictures so that they all fit within the container while being different sizes.
http://i.stack.imgur.com/TQCwW.png
The black boxes are the "pictures", this is what I am trying to do but I keep messing up here and there, does anyone know how I would change my code to display the pictures as such?
Any advice or answers would be greatly appreciated :D!
Thanks :)
I would use a javascript masonry layout for this:
http://masonry.desandro.com/
Follow the docs and it's an easy install.
I'm certain it's something super stupid, but I've been stuck for a while, now... So, I have images on a website, and I'd like them to move slightly on hover.
So I have in the HTML:
<img class="thumb" src="somefile"/>
And in the CSS:
img.thumb {
position:relative;
top:0px;
background:#333399;
}
img.thumb:hover {
position:relative;
top:5px;
background:#00CCCC;
}
The backgrounds are there just to see whether something is happening. Actually, the background doesn't change, so the hover is never taken into account. Does anyone have an idea why that could be??
EDIT
Thanks a lot, everyone!
I actually solved it by throwing in a:
a > img.thumb:hover {
position:relative;
top:2px;
}
Which worked. Still not exactly sure why it didn't work just with img.thumb:hover...
Here is the solution.
The HTML:
<div>
<img class="thumb" src="http://www.google.co.in/images/srpr/logo4w.png"/>
</div>
The CSS:
img.thumb {
position:relative;
top:0px;
}
img.thumb:hover {
position:relative;
top:5px;
background:#00CCCC;
}
I hope this helps.
Your code should work, I have checked it here: http://cssdesk.com/XcV2D
Some other styles should be impacting...
I'm new to web designing.
I started to designing a sample page but I have some challenges.
I have photoshop template like below image.
to convert it to HTML and CSS I fallowed these steps :
I separated background image with logo then I putted to background of body
I created main DIV as page container with relative position.
now I want to put texts to page ( OH BOY WE'RE LOST !) and ( THE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR
TEMPORARILY UNAVAILABLE.)
I have some questions here :
How do I put them on Page ? both of them in one DIV ? or each one in separated DIV ?
How should I position them to having same position in picture and web site ? is there any specific technique exist ? or should I do i with test and try ?
Please explain me.
Fix the width width:100% of the page div. and give <h1> tag for "OH BOY WE'RE LOST!" with specified width and margin: 0 auto;.
and <p> tag for remaining text that "HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE."
<div class="page">
<h1>OH BOY WE'RE LOST!</h1>
<p>HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</p>
</div>
css :
.page {
position:relative;
width:100%;
height:auto;
}
.page h1 {
position:absolute;
top:0px;
left:0px;
font-size: /*your font size*/
font-family: /*your font family*/
width:100px; /*you can change the width as per your need*/
margin:0 auto;
}
.page p {
width:98%;
margin:0 auto;
}
How do I put them on Page ? both of them in one DIV ? or each one in separated DIV ?
Both of them in seperate div and enclosing them in the background image div. I personally prefer span than div because it is plain text.
<div class="backGroundImag">
<span class="text1"> Text goes here </span>
<span class="text2"> Text goes here </span>
</div>
You need to keep in mind the web is not a pixel perfect medium as there are so many variables in play: different browsers, operating systems, screen resolutions etc.
If you are new to web designing, start with something a little more simple. What you have there is a great design that may not immediately translate easily to the web (your search box for a start would provide some interesting implementation challenges).
Don't aim too high early on. Read, practice, repeat. Here is a good article on centered design techniques to get you started:
http://www.webdesignforidiots.net/2009/03/fixed-width-centered-website/
Marked as CW because this is advice and not an answer!
body { margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; }
.wrapper { width:600px; margin:0px auto; background:url(images/bg.jpg) no-repeat; min-height:437px; }
.header { width:144px; margin:0px auto; padding: 25px 0 20px 0; height:130px; } /*If you want logo Seperatly use this step*/
.header h1 { margin:0px; padding:0px; } /*For Seo prupose*/
.content { margin:0px auto; padding:0px; width:480px; }
.content h1 { text-align:center; text-transform:uppercase; font-size:16px; margin:0px; padding:0px;}
.content h2 { font-size:12px; }
HTML
<div class="wrapper">
<div class="header"><h1><!--<img src="images/logo.png" alt="logo" />-->Logo</h1></div>
<div class="content">
<h1>OH BOY WE'RE LOST !</h1>
<h2>THE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</h2>
</div>
</div>