I am trying to display my projects on my website and want a description to appear when the image is havered over. I can get the text to appear on hover but it covers the whole div which is wider than the image. I want the text to match the image width and not the container.
Heres my JSX- added the mapping for context but my question pertains to whats between the component:
{content.map((item, id) => (
<div key={id} className='border'>
<p className='projectTitle'>{item}</p>
{url[item][2] !== ''
? (<div className='center' onMouseEnter={() => onHover(item)} onMouseLeave={onLeave}>
<figure className='center'>
<img src={url[item][2]} alt={item} className='portfolioIcon center'/>
{hover === item
? <p className="textOver" onMouseEnter={() => onHover(item)}>{url[item][3]}</p>
: null }
</figure>
<br />
</div>)
Here's the CSS- I can cheat a bit by defining the text width to 25vw but not all images are the same width and so it still doesn't match the width properly on all images. I would like a way to set the width to be that of the underlying image.
.textOver {
position: absolute;
background-color: rgba(0,0,0,0.6);
width: 25vw;
}
.portfolioIcon {
height: 25vh;
width: auto;
}
I also have the items displayed in a grid format so I want the 25vh constant with auto image widths and so I cant simply set the width to be constant.
Related
I want to assign height to parent div based on the child content (here SVG is my child which can have different content based on data). If I assign fixed height either to parent or the child, it gives issue when content changes. It works fine for the width (automatically alter div width based on content) but not for height. Here is my code snippet.
React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// logic
if (colorLegend) {
select(legend)
.append("svg")
.attr("overflow","visible")
.attr("width", 150 + "px")
.call(colorLegend);
}
}
return (
<div style={{position: "absolute",right: 16,top:
10,backgroundColor: "black",borderRadius: "5px",padding:
"10px"}}>
<label style={{ color: "#6F6F6F" }}>
{name}
</label>
<div id="legend"></div>
</div>
);
Fiddle link: https://jsfiddle.net/1sv3Lwar/
I think the reason your parent <div> isn't "growing" vertically is because you are using:
position: "absolute"
Using absolute positioning or floats will cause this.
Although, assuming you need the absolute positioning, so adding: overflow: hidden should do the trick.
I am trying to use the Next.js Image component with images that all have unique sizes. Their example states the image will stretch to the parent div width and height. I've tried wrapping them but don't know how to accommodate dynamic image sizes. I want to have a set width and the height to adjust to each respective proportion. TIA.
Here is my code (the images are coming from an array) -- since I don't have a height set nothing renders on the page. If i use Tailwind's h-auto it still does not display:
<div className="w-screen h-screen">
{allImages.allImages.map((image, i) => {
return (
<div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
<Image priority src={`/${image}`} layout="fill" objectFit="cover" />
</div>
)})}
</div>
I found a solution in this article which seems to work.
<div className="image-container">
<Image src={path} layout="fill" className="image" />
</div>
SCSS
.image-container {
width: 100%;
> div {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
}
I wrapped this in a component named <ResponsiveImage />. You can try other rules on the wrapper, such as position: relative.
You can use these props on the Image tag,
<div className="div-class">
<Image src={imageLink} layout="fill" objectFit="cover" />
</div>
and wrap the Image tag in a div, just as above. Now you can give width and height to the div with media queries and the image will use that space.
I have a web application layout like this, styled with Bootstrap:
------------------------
| Header |
------------------------
| Display Area |
------------------------
The Header is a collection of control elements (mostly buttons) and therefore almost of same height.
The Display Area contains the following:
<div class="row">
<div class="col">
<img class="img-fluid" src="http://localhost/api/currentImage" />
</div>
</div>
http://localhost/api/currentImage returns an image. The image's size always differs: sometimes the width is bigger than height, sometimes vice versa.
Now I'd like to scale the image in that way that it uses as much as possible of the available Display without "overflowing". By overflowing, I mean that there is never a need to show a horizontal or vertical scroll bar because the image is too wide or too high. Right now, <img class="img-fluid" ... only scales the width correctly.
How can I achieve this using Bootstrap/CSS?
Bootstrap will let you resize images with its img-fluid class, but if you need to make the image cover the entire space you would have to write your own CSS, you could make use of the object-fit property to set the image to fill the container, while maintaining its aspect ratio and clipping off if necessary;
As you can see in the example below, the image is narrow, but it will fill the entire container even if it has to expand to do so.
EDIT: Included two more examples with fill and contain so you can see how their behavior changes.
header {
border: 1px solid red;
padding: 10px;
}
section {
border: 1px solid blue;
}
img {
height: calc(100vh - 20px);
width: 100%;
/* This is just to remove a blank space at the bottom of the image */
display: block;
}
img.cover {
object-fit: cover;
}
img.contain {
object-fit: contain;
}
img.fill {
object-fit: fill;
}
<header>
This is a header
</header>
<section>
<img class="cover" src="https://via.placeholder.com/200x700" />
</section>
<section>
<img class="contain" src="https://via.placeholder.com/200x700" />
</section>
<section>
<img class="fill" src="https://via.placeholder.com/200x700" />
</section>
Bootstrap has a predefined classes for responsive image. Check the following class,
.img-responsive Makes an image responsive (will scale nicely to the parent element)
<div class="row">
<div class="col">
<img class="img-fluid img-responsive" src="http://localhost/api/currentImage" />
</div>
</div>
`
Using Aurelia, I created a very simple component with HTML:
<template>
<h1
draggable="true"
css="width: ${width}px;
height: ${height}px;
color:${color};
left: ${left}">
${message}
</h1>
</template>
And TypeScript:
export class Navigation {
message: string = 'Component Text';
width = '400'
height = '250'
color = 'red'
left = '100'
}
All the CSS attributes works as expected, except the left: 100px
The objective is to use the top and left to dynamically set the position of the component. This is also the reason for the draggable="true" attribute.
I can see in the rendered HTML the left: 100px is present but has no effect.
Am I doing something wrong?
Position CSS property should be set to 'relative' or 'absolute' in order to get it working: http://www.w3schools.com/cssref/pr_pos_left.asp
I am creating an email flyer and I have multiple images that I want at 140px by 140px but some are originally 300x300 or 400x400. I don't want to go resize each image as there can be quite a few and the flyer will be a weekly update so is it possible to use CSS to tell all images (or images that have classes) to resize to 140px?
I was going to post some code but it's quite a vague request so there no relevant code I can show to help my question.
maybe if I <span>...</span> and then give the span a class, would it be possible this way?
if your markup is for a newsletter you may force dimensions both with style attribute and with inline width and height attribute, e.g.
<img src="..." style="width:140px; height:140px" width="140" height="140" />
but, anyway, I strongly suggest to perform some kind of batch task for automatic resize of the images (e.g. using GruntJS), so you could save some precious bandwidth on the server in which you store your static assets. (conversely, if you embed images into the email, users will appreciate a lighter size)
Yeah add class to span and then:
span.yourclass img {
width: 140px;
}
I think I might be understanding this, but some simple css should work :
css :
img.small {
width: 140px;
height: 140px;
}
OR if you want to do all img's under a specific element :
.thumbs img {
width: 140px;
height: 140px;
}
html :
<img src="pic.jpg" class="small">
<div class="thumbs">
<img src="pic.jpg">
<img src="pic.jpg">
<img src="pic.jpg">
</div>
Or if they are dynamically generated, you can eliminate the css and just go :
<img src="pic.jpg" width="140" height="140">
You can set width and height for all images. Add "max" keyword to be sure.
img{
max-width:140px !important;
max-height:140px !important;
}
If you simply want ALL images on the page to resize, add the following into your CSS:
img{ width: 140px; }
This will proportionally set the height/width and I'm assuming all you images are square ?
If not, add 'height: 140px' but this will distort an image that isn't square.
wrap your images with div.class then write a single css to resize all the images which are wrapped by that div
MARK-UP::
<div class="imageWrapper">
<img src="/path/to" />
<img src="/path/to" />
<img src="/path/to" />
</div>
CSS::
.imageWrapper{
overflow:hidden;
}
.imageWrapper img{
width:400px;
height:400px;
}