I have a main div as a container with a width of 90%. Inside at the top, I have a title (image) with height: 5em, display: block, and margin: auto.
My HTML code is set up like so: <img scr="">.
When I click way to the left of the picture, I am still able to click on the link. I am using Chrome for this. I tested this in Safari and Firefox; same result. IE and Opera only registered the link when my mouse was directly over the picture (which is what I want). I'm hoping I can get what I want in all browsers. Thanks.
Edit: Here's an example: http://jsfiddle.net/Bionicrm/dXaAF/.
http://jsfiddle.net/derekstory/K7Vwd/
You can put a wrapper around the entire thing specifying the size you want shown:
Example:
HTML
<div id="wrap"> <a id="test" href="test.com">
<div id="image">
</div>
</a>
</div>
CSS
body, html {
height: 100%;
}
#test {
height: 200px;
width: 200px;
}
#image {
background: #000 url("http://www.veterinarian.com/uploads/cms/20100622/4c212d6c1ca11.jpg");
height: 100%;
width: 100%;
background-size: 100%;
}
#wrap {
width: 200px;
height: 150px;
}
Try giving the link these styles
display:block;
width:100px; //or whatever you want
height:5em;
position:relative;
margin:auto;
Related
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
I'm a beginner in HTML coding and I'm trying to display just a part of an image. I'm displaying the image this way:
<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />
but I really don't know how to display just bottom left quarter of the image. It is even possible without making a new picture with the cropped image?
If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:
.container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
bottom: 0;
left: 0;
}
<div class="container">
<img src="http://placehold.it/600x400/fa0" />
</div>
You can just use a div element that has a background image and then just apply a few css changes to that div like so:
#theImg {
height: 200px;
width: 200px;
display: block;
background-image: url('https://myimage.jpg');
background-position: bottom left;
}
JsFiddle: https://jsfiddle.net/kekwdy2L/3/
Use background-image with background-position:
#my-image {
background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
background-position: -220px -80px;
display: inline-block;
width: 200px;
height: 200px;
}
<div id="my-image"></div>
<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>
If you know the size of the image in pixels, you can use a css clip.
Note, clip is officially deprecated in css specification, however its replacement clip-path currently has very low browser support.
Another way of achieving crop is placing the <img> tag within a <div> as shown in this answer.
I'm trying to adjust the height of a picture by a percentage, rather than a pixel. However, when I use height: 30%; it doesn't work, but height: 30px; does work. What am I doing wrong?
My snippet is mind boggingly easy.
.imagebanner {
height: 30%;
width: 100%;
}
<img src="http://localhost/wordpress/wp-content/uploads/2016/11/Welding-banner.jpg" alt="welding-banner" class="imagebanner" />
If you use a percentage value for height, the parent element needs to have a defined height (for example 100%), and this goes up to the body and html, so as a start you can begin with adding
html, body { height: 100%; }
and also give height definitions to all the elements in between body and your image.
Update your browser and then try. Sometimes if you're using old browser. New features of HTML don't work in old browser.
You need to set a 100% height on the parent element.
.imagebanner {
height: 30%;
width: 100%;
background: red;
}
.wrapper {
height: 200px;
width: 200px;
background: grey;
}
<div class="wrapper">
<img src="http://christiancomputerrepair.com/wp-content/themes/christiancomputerrepair/images/home_computer.png" class="imagebanner">
</div>
For some reason, my website does not want to display the background-image which I have set on my div.
I want to have a featured image that display's across the whole page (kind of like on Microsoft's homepage). However, the image doesn't want to show.
I have tried disabling AdBlock and any other extensions with no avail, I have also tried to look on forums to see if I could find anything (which I haven't).
The following is my HTML:
<body>
<div class="container">
<div class="content">
<div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">
</div>
</div>
</div>
</body>
And my 'relevant' CSS:
.container {
left:15%;
width:70%;
margin:0px auto;
}
.content {
background-color: #FFF;
border: 1px solid #F2F2F2;
padding-bottom:100px;
padding:40px;
width:90%;
margin:0px auto;
padding-top:100px;
}
.featured-img-display{
width: 100%;
height: 100%;
opacity: 1;
background-image: url('/data/img/game_data/19a017f91q.jpg');
background-size: cover;
background-repeat: no-repeat;
}
Thanks
Fiddle: https://jsfiddle.net/ses3j1Ld/
Currently, the featured-img-display element has no height. That's why you don't see the background image.
height: 100%; will only set full screen height on an element if its parent actually has 100% screen height as well.
To do this using % units you'll need to make sure that all elements up to the featured-img-display element have 100% height,.. something like:
html,body,.container,.content {
height: 100%
}
Then your current CSS code will work. Sometimes however the above code isn't so viable.
Using viewport units here: height: 100vh; makes things a lot easier
Note:
If you want the image to span the full screen height (and without scroll-bars), you'll have to adjust your CSS a bit:
1) remove default margin with body { margin:0 }
2) You have set padding and a border on the parent of the element with the background image... you'll probably want to set these properties on the image element itself with box-sizing set to border-box.
Codepen demo
the height of .featured-img is percentage value for make it work the parent's height must be determined and the only exception is the root element html, which can be a percentage height.
body, html{
height: 100%;
width: 100%;
}
.container {
left:15%;
width:70%;
height: 100%;
margin:0px auto;
}
.content {
background-color: #FFF;
border: 1px solid #F2F2F2;
padding-bottom:100px;
padding:40px;
width:90%;
height: 100%;
margin:0px auto;
padding-top:100px;
}
.featured-img-display{
width: 100%;
height: 100%;
opacity: 1;
background-image: url('http://i.imgur.com/IMiabf0.jpg');
background-size: cover;
background-repeat: no-repeat;
}
<body>
<div class="container">
<div class="content">
<div class="featured-img-display imgdisplay" data-lazyload="undefined" data-bgfit="cover" data-bgposition="right center" data-bgrepeat="no-repeat" data-lazydone="undefined" src="/data/img/game_data/19a017f91q.jpg" data-src="/data/img/game_data/19a017f91q.jpg">
</div>
</div>
</div>
</body>
Instead of div, can you try with img tag as well. I think that might work
Well, all your divs .container, .content, and .featured-img-display don't have a height. height:100% means having height equal to the element's parent but since none of those elements have any height, height: 100% equates to 0px. Same goes for width.
So, one of the divs will have to have a specific height and width. Here's an example.:
Here is a JSFiddle to show what I mean: http://jsfiddle.net/p4toy2qq/.
The Code is here:
HTML
<div class="container">
<img src="image-of-any-size.jpg" alt="alt" />
</div>
CSS
.container { width: 100px; height: 100px; overflow: hidden; border: black solid 1px; margin: 10px;}
.container img { width: 100%; }
I basically want different sized images to fill out the divs, without the aspect ratio getting messed up. The overflow should be hidden, so the parts outside get 'cropped' off.
Any ideas?
If you have the option to set them as background images you can use:
.container{
background: url('something.jpg');
background-size:cover;
background-position:center center;
}
Note that some older browsers don't support background-size: http://caniuse.com/#search=background-size
there's a method to do this.
.img-container{
position:relative;
width:100px;
height:100px;
display:block;
overflow:hidden;
text-align:center;
}
horizontal img
.img-container > img{
position:absolute;
top:0;
height:100%;
}
vertical img
.img-container > img{
position:absolute;
top:0;
width:100%;
}
demo
If you want to cover the height of the images inside the container, use background-image: auto 100% style instead of img tag and apply the image to the .container element directly.
Working Fiddle
Note: This solution is assuming that all your images have more than 100px of height as you have shown in the fiddle.
Update:
If you want to just cover the image completely inside the container then you can use background-image: cover
Working Fiddle
You could use the new object-fit property (currently webkit only)
1) Set object-fit: cover; on the image to ensure that the aspect ratio is kept, and
2) Set height: 100px to fill the box if the image is < 100px high.
FIDDLE
.container {
width: 100px;
height: 100px;
overflow: hidden;
border: black solid 1px;
margin: 10px;
}
.container img {
width: 100%;
object-fit: cover;
height: 100px;
}
<div class="container">
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="alt" />
</div>
<div class="container">
<img src="http://chennaionline.com/images/gallery/2013/June/20110623010938/Singam2_Suriya_Stills_Photos_Images_10.jpg" alt="alt" />
</div>
<div class="container">
<img src="http://www.moviehdwallpapers.com/wp-content/uploads/2014/10/happy_diwali__sms_images_.jpg" alt="alt" />
</div>
You can read more about this new property in this webplatform article.
From the above article - regarding the 'cover' value:
The whole image is scaled down or expanded till it fills the box
completely, the aspect ratio is maintained. This normally results in
only part of the image being visible.
Also, here is a fiddle from the above article which demonstrates all the values of the object-fit property.