I'm using ImageKit to store images for my portfolio (more specifically, I'm using their Vue SDK. Typically my images are horizontal/landscape, however I just added a few that are vertical orientation. What I'd like to do is force crop the vertical images so that they are the same dimensions as the horizontal images. Does anybody have any experience with this?
<template>
<client-only>
<v-col
cols="12"
sm="6"
md="6"
lg="4"
xl="3">
<v-card
class="image-card"
flat
nuxt
:ripple="false"
:to="imageLink">
<div class="overlay">
<h3
class="display-2 text--white gallery-name">
{{ item.title }}
</h3>
<div class="btn-wrapper">
<v-btn
depressed
:ripple="false"
color="primary"
class="visit-btn"
:to="imageLink">
{{ btnText }}
</v-btn>
</div>
</div>
<i-k-image
:public-key="publicKey"
:url-endpoint="urlEndpoint"
:src="imageSrc"
:transformation="[
{ progressive: true },
{ cropMode: 'maintain_ratio' },
{ width: '500' },
]"
#contextmenu.prevent />
</v-card>
</v-col>
</client-only>
</template>
<style lang="scss" scoped>
.image-card {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
cursor: pointer;
height: 100%;
margin: 0 auto;
position: relative;
.overlay {
align-items: center;
background-color: rgba(255, 255, 255, 0.3);
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.2s all ease-in-out;
visibility: hidden;
}
img.ik-image {
width: 100%;
}
}
</style>
Current result:
*I'd like the top row to be force cropped to the same dimensions as the bottom row.
You can use the <ik-image> component of Imagekit Vue SDK to set the same height and width for all of your images like this -
<ik-image :src="your_image_src" :transformation="[{ height: 300, width: 400 }]" /> (assuming you have installed Imagekit plugin using Vue.use and specified required parameters there)
Related
I want to get rid of arrows on my v-slide-group and be able to scroll it by using the mousewheel on desktop, currently is only scrollable on mobile viewport.
Is this possible?
my template:
<v-layout justify-center>
<div style="width: 600px; background-color: red">
<v-slide-group center-active active-class="success">
<v-slide-item v-slot:default="{ active, toggle }"
v-for="(item, idx) in 25"
:key="idx"
>
<v-card
#click="toggle"
class="mx-2 rounded-lg"
width="250"
height="175"
:ripple="{ class: 'rounded-lg' }"
:color="active ? undefined : 'grey lighten-1'"
/>
</v-slide-item>
</v-slide-group>
</div>
</v-layout>
css
.v-slide-group__next {
display: none;
}
.v-slide-group__prev {
display: none;
}
And a codepen:
https://codepen.io/willcolmenares/pen/qBNWRKY
I figure it out but I'm not sure if its the best way (breaks the center-active animation which I really like).
.v-slide-group__wrapper {
overflow-x: auto; /* Enables the horizontal scrollbar */
/* Next lines hides scrollbar in different browsers for styling purposes */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.v-slide-group__wrapper::-webkit-scrollbar {
display: none; /* Chrome opera and Safary */
width: 0px;
background: transparent;
}
The dropdown elements on my page (i.e., v-overflow-btn and v-date-picker) are automatically sized to 140px by 80px, even though I don't set any sizing limits in the vue component or its parents.
When I inspect the dropdown list created by v-overflow-btn, I can turn off the sizing settings (width: 140px, height: 80px) of the v-card, which appears to be a child of the v-select-list, and then the element displays like expected. I can't figure out what to change in Vue to keep this automatic sizing from happening
<template>
<div class="main">
<v-container>
<v-card class="accent" height="100%" width="100%">
<v-card-title>
Create New Event
</v-card-title>
<v-container >
<v-layout>
<v-card-text>
<v-form>
<v-overflow-btn
label="Tournament Type"
:items="tournamentOptions"
v-model="newEvent.type" >
</v-overflow-btn>
</v-form>
</v-card-text>
</v-layout>
</v-container>
</v-card>
</v-container>
</div>
</template>
styling from App.vue:
header {
background-color: #2A7342;
}
.nav li {
display: inline-block;
padding:20px;
color: #fff;
background-color: #2A7342;
}
.nav li a {
color: #fff;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
}
.nav li:hover {
background-color: rgb(216, 216, 216);
cursor: pointer;
color:rgb(44, 44, 44);
}
.nav li a:hover {
color:rgb(44, 44, 44);
}
.router-link-active {
background-color: rgb(44, 44, 44);
}
</style>
devtools screenshot
I have html this is basically like this:
<span>
<input name="checked_field" type="text" />
<p class="has-warning danger" style="display:none;">{{ error.first() }}</p>
</span>
The display:none is added by JavaScript at load time. It is removed if the user types an invalid value in checked_field.
Since the framework controls visibility by simply removing style="display:none;", I am wondering: Is it possible to transition the height and visibility by pure CSS rules when display:none is removed via JavaScript? Again, given that I'm not able to add a 2nd class, but am stuck with the JavaScript framework removing a style.
We can achieve this by overriding the display:none property.
.has-warning, .has-warning[style*='display:none'] {
transition: all 1s;
display: block !important;
height: 0;
opacity: 0;
}
.has-warning:not([style*='display:none']) {
height: 50px;
opacity: 1;
}
Here's a JS Fiddle: https://jsfiddle.net/eywraw8t/165903/
WARNING! CSS will see display:none as different from display: none (space in between) so if it doesn't work at first, check this.
it really easy
const dropDownSubInput = ref(false) //nuxt 3
.subForm {
width: inherit;
max-height: 0;
opacity: 0;
overflow-y: hidden;
transition: all .2s ease;
}
.formActive {
.form {
box-shadow: 0 41px 36px rgba(0, 0, 0, 0.2);
.subForm {
max-height: 1000px !important;
opacity: 1 !important;
}
}
}
<div class="formSection" :class="dropDownSubInput ? 'formActive' : ''">
<div class="form">
<form #submit.prevent>
<input type="text"
placeholder="Введите слово или название"
v-model="searchInput"
#click="dropDownSubInput = true"
/>
<font-awesome-icon :icon="['fas', 'fa-magnifying-glass']"/>
</form>
<div class="subForm">
</div>
</div>
</div>
I am working with a third party website which allows me to modify code to suit my needs. I have a product page with responsive columns. Administrative users can upload images for the products which end users can order. I've set it so the images are responsive as well, but because the product images are not all the same aspect ratio, I have some items which are taller than others, making the page leave spaces in the column blank. I want the images to stay responsive and keep their aspect ratio, but have the containers they are in all have the same height and responsive width. Changing max-height and min-height just gives the same response as setting height. How do I do that while keeping the width correct?
<div class="col-xs-12 text-center">
<div class="well text-center">
<href="product/{{LineItem.Product.InteropID}}">
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<img class="img-responsive" style="max-height: 200px; min-height: 200px; width: auto; margin: auto;" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</figure>
<div class="empty" ng-hide="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl">
<span class="fa empty"><i class="fa fa-camera"></i></span>
</div>
</a>
</div>
</div>
The best solution would be to force users to upload an image of a certain height/width, but barring that, you could just put the responsive images inside of a div that has a fixed size and it's css overflow property set to hidden.
<figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
<div style="height:200px; width:200px;overflow:hidden;">
<img class="img-responsive" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
</div>
</figure>
Now, the image is fully responsive, but any portions of it that are bigger than its container will be clipped.
HTML
<div class="img-wrap ratio-4-3">
<div class="img-content">
<img src="https://picsum.photos/200" />
</div>
</div>
SCSS
.img-wrap{
position: relative;
.img-content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
> img{
max-width: 100%;
max-height: 100%;
width: auto;
}
}
&.ratio-4-3{
padding-top: 75%;
}
&.ratio-16-9{
padding-top: 56.25%;
}
&.ratio-3-2{
padding-top: 66.66%;
}
&.ratio-8-5{
padding-top: 62.5%;
}
}
https://jsfiddle.net/huypn/pcwudrmc/25813/
I am looking to center a div that is absolutely positioned inside of an overflow div.
Here is my HTML. Fiddle
<header class="contain960">
<div class="brand_logo"></div>
<nav>
<ul>
<li class="active">Boats</li>
<li>Cars</li>
<li>Powersports</li>
<li>RV's</li>
<li>Consignment</li>
</ul>
</nav>
</header>
<div class="site_line top"></div>
<div class="site_line custom"></div>
<div class="site_line bottom"></div>
And the CSS.
section {
position: relative;
max-width: 1280px;
min-width: 960px;
width: 100%;
overflow: hidden;
}
.site_line {
position: absolute;
width: 1280px;
height: 1px
//Gradient Fill
//Center the DIV;
}
.site_line.top{
top: 0px;
}
.site_line.bottom{
bottom: 0px;
}
The .site_line element should always remain centered in the div even as the section gets smaller than 1280px wide and not be pushed to the left. I've done this before with background images and the background-position property. but can't for the life of me figure it out how to do it with out javascript.
Any help would be fantastic!
Don't use position: absolute;!
Instead use margin: auto;:
.site_line {
margin: auto;
width: 1280px;
height: 1px
//Gradient Fill
}