Is there a way in CSS to scale an img element's image to match the containing button element?
In this example, I would like the image to be centered on the button and scaled suitably for the size of the button. In fact they are neither suitably scaled nor aligned.
<html>
<head>
<title>Button img element scaling</title>
<style type="text/css">
div.container {
display: flex;
justify-content: center;
}
button {
min-width: 20px;
max-width: 20px;
flex-basis: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="container">
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
</div>
</body>
</html>
I believe it is possible using divs instead of button elements, but I'm asking about button elements (because it's nice semantically to have a button be a button, and because the buttons I have are already styled).
I also believe there are alternative ways to approach this using background images, but since here the image is not just decoration but has semantic meaning, I'd like to use an img (and later add an alt attribute).
The example uses flex, but the problem doesn't seem to be specific to that.
display flex on the button itself seems to do the trick
<html>
<head>
<title>Button img element scaling</title>
<style type="text/css">
div.container {
display: flex;
justify-content: center;
}
button {
min-width: 20px;
max-width: 20px;
flex-basis: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
<button>
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" />
</button>
</div>
</body>
</html>
edit
incase it needs to grow to the button size aswell, you can add width="100%" height="100%" on the image to make it scale.
it would look like this:
<img src="https://fonts.gstatic.com/s/i/materialicons/clear/v6/24px.svg" width="100%" height="100%" />
I think you could use object-fit in your css -> https://www.w3schools.com/css/css3_object-fit.asp
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
background-color: red;
display: flex;
padding: 10px;
}
.div2 {
background-color: yellow;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div1">
<img src="smiley.gif">
<div class="div2">
A<br>Smiley<br>Face
</div>
</div>
</body>
</html>
I use the above code to create an outer div with flex display and in it to be an image and another div with a text right to it. Code works but the image seems to strech... How can I make the image keep its original size? Ty
Your image is stretching because the default value of align-self is stretch. You need to change it to center or something else.
align-self: center
See it the doc
I'm having an issue with a <div> pushing up another <div> from underneath.
Basically, the <div> above is a <canvas> of defined dimensions, and underneath is a <div> that contains a <p> element. After a event is fired, I'm using innerHTML to change the contents of the <p> element. Because of this, the content of the <p> element goes from one line to two. When that happens, however, the <canvas> is pushed up the page.
I've tried using different position CSS values, but because I'm using flexbox it means that the two divs stack up.
Here's the CSS and HTML:
.container {
padding: 10px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.player {
margin-bottom: 20px;
}
.textContainer {
font-size: 24px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div class="player">
<canvas id="canvas"></canvas>
</div>
<div class="textContainer">
<p id="moveText">Moves: 0</p>
</div>
</div>
</body>
</html>
Thanks in advance!
My friend and I are coding a quick web site and are having issues centering the elements with CSS. We have tried using the margin: 0 auto command on the individual elements, but it didn't work. All the other style changes from the CSS sheet work. Can anyone tell me why margin: 0 auto didn't work or a way to center all the elements in the body?
Html Code:
<!DOCTYPE html>
<html>
<head>
<title>MatchUp</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<br>
<img id="banner" src="banner.png" alt="Banner" width=1000 height=300>
<br>
<form>
<input id="name" type="text" name="whateva"<br>
<br>
<input id="heart" type="image" src="heart.png" width=250 height=250>
</form>
<br>
</body>
</html>
CSS Code:
body{
background-image: url('bg.jpg');
}
#name{
height: 30px;
width: 200px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: 0;
}
Why margin: 0 auto; did not work:
There could be a few reasons why your elements didn't center.
For margin: 0 auto; to work, an element needs to have a set width like width: 100px;.
If the element has a set width and still does't center, try display: block;.
Those two things will always work.
How to center elements without margin: 0 auto;:
If you're just trying to center all elements inside the body tag, just use text-align: center; on the body tag to accomplish that.
That said, I don't think you were trying to do that though.
Firstly, I assume you want to center your webpage like most of the websites. The method is to wrap all your HTML elements inside one parent div, give it a standard width most of the sites follow (it's up to you). In this case I used 960px. Than auto margin that parent container. So your whole page center aligns perfectly. My suggestion don't use 'br' tags like that, utilize the margin properties of CSS. Have a look at Bootstrap, it will help you a lot.
HTML
<!DOCTYPE html>
<html>
<head>
<title>MatchUp</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="pageContainer">
<img id="banner" src="banner.png" alt="Banner" width=1000 height=300 />
<form>
<input id="name" type="text" name="whateva" />
<input id="heart" type="image" src="heart.png" width=250 height=250 />
</form>
</div>
</body>
</html>
CSS
body{
background-image: url('bg.jpg');
}
#pageContainer {
width: 960px;
margin: 0 auto;
}
#name{
height: 30px;
width: 200px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
outline: 0;
}
...
This will get you a nicely centered page. Comment if you need any help.
You need to set the width where you want to use margin: 0 auto;. So if you wanted to center the body within the browser, you could do something like this:
body
{
background-image: url('bg.jpg');
margin: 0 auto;
width: 900px;
}
<center>
http://jsfiddle.net/pellmellism/T26Pw/
there is your fiddle....try using the good old fashioned center tag. KISS