Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a web app in which I let users to upload their logo image. This image has no restrictions about width and height. Then in a JSP I display the logo for each user. The problem is each user's logo has different dimensions (small, big...)
which would be the best way to display the image??
If all images are going to be constrained then apply a width to the parent and add a max-width to the image.
JSFiddle
<div class="img">
<img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" alt=""/>
</div>
.img {
width:250px;
}
.img img {
max-width:100%;
}
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Here is a codepen link:
http://codepen.io/anon/pen/lfoxv/
As you can see, the layout loads fine, but upon any kind of resizing of the browser window, the layout breaks until the page is refreshed.
This seems to be the only combination of parameters that allows me keep the aspect ratio of an image when using percentage based divs. Fixed height layouts are tough...
I fixed your code. Please see this link: http://codepen.io/anon/pen/bBjDm/
Your code:
#middle {
background-color:rgb(200,200,200);
display:inline-block;
height:100%;
<!--width:auto;-->
}
Updated code:
#middle {
background-color:rgb(200,200,200);
display:inline;
height:100%;
<!--width:auto;-->
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?
Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">
You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.
You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to add a red notification bar to my site to display notices for example scheduled maintenance.
What code would I need to add to my site to enable this to work.
Thanks.
Just add a div with some styling to the top of your site.
<div id="notificationbar">
<p>Currently the site is down</p>
</div>
You can style it with css:
#notificationbar {
background-color: red;
}
#notificationbar p {
color: white;
}
You can do many things with it using javascript or css. If you don't understand the above, you should check out how to write HTML and CSS (try looking on google) or hire someone who does.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm creating web site layout.
This is label3 css :
background-color:#c4efd5;
min-height:368px;
height:100%;
I want the label3(<div>) re-size to 450px when I insert image height=450px and when there's no data in the box, the minimum height of label3 will be 368px. I used min-height but it didn't work.
Any answer will be appreciate. Thanks you.
Remove height: 100% it is overwriting your min-height
What element is this being applied to? Height will have no effect on inline elements such as spans etc. Either apply it to a block level element or set display: block on the selector
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm writing my home page in and the footer is shown on top of the main section.
I tried adding position:relative and position:absolute;bottom:0; but it did not work.
remove height from CSS style in this classes : .login and .homeArticle that way it will always fit at the bottom.